I am completely new to this and I would like to know how I can make it so that when you click on one of the links only the text relating to that link is shown. So if I click Kabling and then Programmering the text about Kabling should not be displayed. I would really appreciate any feedback on everything else aswell since I just started to learn html and css 3 weeks ago. To be able to post this question I need to write more text although Im not sure what to write.
Ty in advance
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Andreas</title>
<!-- styles -->
<link rel="stylesheet" href="stil.css"/>
</head>
<body>
<div class="menu">
<div class="label">menu</div>
<div class="spacer"></div>
<!-- Knappar -->
<!-- Kabling -->
<div class="item"><a onclick="myFunction1()" href="javascript:void(0);">Kabling</a></div>
<!-- Programmering -->
<div class="item"><a onclick="myFunction2()" href="javascript:void(0);">Programmering</a></div>
<!-- Konvertering -->
<div class="item"><a onclick="myFunction3()" href="javascript:void(0);">Konvertering</a></div>
<!-- Bildbehandling -->
<div class="item"><a onclick="myFunction4()" href="javascript:void(0);">Bildbehandling</a></div>
<!-- Chrome devtools -->
<div class="item"><a onclick="myFunction5()" href="javascript:void(0);">Chrome Devtools</a></div>
<!-- Ellära -->
<div class="item"><a onclick="myFunction6()" href="javascript:void(0);">Ellära</a></div>
<!-- -->
<img src="" alt="">
</div>
<!-- Content -->
<!-- Kabling Text -->
<br>
<div id="KablingText"style="display:none;">
<font size=" 3">Sette opp nettverk</font>
<br><br>
<img class="subjimg" src="images/kabling.jpg">
<div class="subjtxt">Trekke kabler i veggkanal å sette på ethernetkontakt på kat 6 kabel.
Hva et patchpanel, svitj og etasjefordeler er. Anext (elektromagnetisk støy), Separasjon mellom starkstrømkabel og tele/datakabel SxP=A.Nek 700 regelbok
Cenelec Ekomloven. Strukturert kabling Fiber Potens Likstrøm og væxelstrøm Sinuskurva.
Diagonalrevolvert kabel. Slaglengde.Bølgelengde λ Multiplikatorer – atto – exa I=Strøm, Itensitè courant
</div>
</div>
<!-- Programmering Text -->
<div id="Programmering"style="display:none;">
<h2>Om programmering</h2>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa porro ducimus animi! Nisi, temporibus? Iure, doloremque quisquam eveniet, nesciunt, unde culpa recusandae inventore voluptates ipsum esse veritatis eius magni rem?
</div>
<!-- Konvertering Text -->
<div id="Konvertering"style="display:none;">
Binære tall og hvordan man regner med dem. Mega=miljon=1x106
Giga=miljard=1x109. Hz svingninger pes sek, Høy frekvens har dårligere rekkevidde lav frekvens har bedre rekkevidde.
</div>
<!-- Bildbehandling Text -->
<div id="Bildbehandling"style="display:none;">
Text om Bildbehandling
</div>
<!-- Chrome Devtools Text -->
<div id="ChromeDevtools"style="display:none;">
Text om Chrome Devtools
</div>
<!-- Ellära Text -->
<div id="Ellära"style="display:none;">
Text om Ellära
</div>
</div>
<!--JS För knapp 1 -->
<script>
function myFunction1() {
var x = document.getElementById('KablingText');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 2 -->
<script>
function myFunction2() {
var x = document.getElementById('Programmering');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 3 -->
<script>
function myFunction3() {
var x = document.getElementById('Konvertering');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 4 -->
<script>
function myFunction4() {
var x = document.getElementById('Bildbehandling');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 5 -->
<script>
function myFunction5() {
var x = document.getElementById('ChromeDevtools');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
<!--JS För knapp 6 -->
<script>
function myFunction6() {
var x = document.getElementById('Ellära');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</script>
</body
</html>```
CodePudding user response:
removed code duplication
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Andreas</title>
<!-- styles -->
<link rel="stylesheet" href="stil.css" />
</head>
<body>
<div class="menu">
<div class="label">menu</div>
<div class="spacer"></div>
<!-- Knappar -->
<!-- Kabling -->
<div class="item"><a onclick="myFunction('KablingText')" href="javascript:void(0);">Kabling</a></div>
<!-- Programmering -->
<div class="item"><a onclick="myFunction('Programmering')" href="javascript:void(0);">Programmering</a></div>
<!-- Konvertering -->
<div class="item"><a onclick="myFunction('Konvertering')" href="javascript:void(0);">Konvertering</a></div>
<!-- Bildbehandling -->
<div class="item"><a onclick="myFunction('Bildbehandling')" href="javascript:void(0);">Bildbehandling</a></div>
<!-- Chrome devtools -->
<div class="item"><a onclick="myFunction('ChromeDevtools')" href="javascript:void(0);">Chrome Devtools</a></div>
<!-- Ellära -->
<div class="item"><a onclick="myFunction('Ellära')" href="javascript:void(0);">Ellära</a></div>
<!-- -->
<img src="" alt="">
</div>
<!-- Content -->
<!-- Kabling Text -->
<br>
<div id="KablingText" style="display:none;">
<font size=" 3">Sette opp nettverk</font>
<br><br>
<img class="subjimg" src="images/kabling.jpg">
<div class="subjtxt">Trekke kabler i veggkanal å sette på ethernetkontakt på kat 6 kabel.
Hva et patchpanel, svitj og etasjefordeler er. Anext (elektromagnetisk støy), Separasjon mellom
starkstrømkabel og tele/datakabel SxP=A.Nek 700 regelbok
Cenelec Ekomloven. Strukturert kabling Fiber Potens Likstrøm og væxelstrøm Sinuskurva.
Diagonalrevolvert kabel. Slaglengde.Bølgelengde λ Multiplikatorer – atto – exa I=Strøm, Itensitè courant
</div>
</div>
<!-- Programmering Text -->
<div id="Programmering" style="display:none;">
<h2>Om programmering</h2>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa porro ducimus animi! Nisi, temporibus? Iure,
doloremque quisquam eveniet, nesciunt, unde culpa recusandae inventore voluptates ipsum esse veritatis eius
magni rem?
</div>
<!-- Konvertering Text -->
<div id="Konvertering" style="display:none;">
Binære tall og hvordan man regner med dem. Mega=miljon=1x106
Giga=miljard=1x109. Hz svingninger pes sek, Høy frekvens har dårligere rekkevidde lav frekvens har bedre
rekkevidde.
</div>
<!-- Bildbehandling Text -->
<div id="Bildbehandling" style="display:none;">
Text om Bildbehandling
</div>
<!-- Chrome Devtools Text -->
<div id="ChromeDevtools" style="display:none;">
Text om Chrome Devtools
</div>
<!-- Ellära Text -->
<div id="Ellära" style="display:none;">
Text om Ellära
</div>
</div>
<script>
var kabling = document.getElementById('KablingText');
var prog = document.getElementById('Programmering');
var konv = document.getElementById('Konvertering');
var bild = document.getElementById('Bildbehandling');
var chrome = document.getElementById('ChromeDevtools');
var ell = document.getElementById('Ellära');
var allEle = [kabling, prog, konv, bild, chrome, ell]
function myFunction(id) {
for (let index = 0; index < allEle.length; index ) {
const element = allEle[index];
if (element.id === id) {
if (element.style.display === 'none')
element.style.display = 'block';
else element.style.display = 'none';
} else
element.style.display = "none"
}
}
</script>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
You can just simply hide others when you are showing one.
var kabling = document.getElementById('KablingText');
var prog = document.getElementById('Programmering');
var konv = document.getElementById('Konvertering');
var bild = document.getElementById('Bildbehandling');
var chrome = document.getElementById('ChromeDevtools');
var ell = document.getElementById('Ellära');
function myFunction1() {
if (kabling.style.display === 'none') {
kabling.style.display = 'block';
prog.style.display = 'none';
konv.style.display = 'none';
bild.style.display = 'none';
chrome.style.display = 'none';
ell.style.display = 'none';
} else {
kabling.style.display = 'none';
}
}
function myFunction2() {
if (prog.style.display === 'none') {
kabling.style.display = 'none';
prog.style.display = 'block';
konv.style.display = 'none';
bild.style.display = 'none';
chrome.style.display = 'none';
ell.style.display = 'none';
} else {
prog.style.display = 'none';
}
}
function myFunction3() {
if (konv.style.display === 'none') {
kabling.style.display = 'none';
prog.style.display = 'none';
konv.style.display = 'block';
bild.style.display = 'none';
chrome.style.display = 'none';
ell.style.display = 'none';
} else {
konv.style.display = 'none';
}
}
function myFunction4() {
if (bild.style.display === 'none') {
kabling.style.display = 'none';
prog.style.display = 'none';
konv.style.display = 'none';
bild.style.display = 'block';
chrome.style.display = 'none';
ell.style.display = 'none';
} else {
bild.style.display = 'none';
}
}
function myFunction5() {
if (chrome.style.display === 'none') {
kabling.style.display = 'none';
prog.style.display = 'none';
konv.style.display = 'none';
bild.style.display = 'none';
chrome.style.display = 'block';
ell.style.display = 'none';
} else {
chrome.style.display = 'none';
}
}
function myFunction6() {
if (ell.style.display === 'none') {
kabling.style.display = 'none';
prog.style.display = 'none';
konv.style.display = 'none';
bild.style.display = 'none';
chrome.style.display = 'none';
ell.style.display = 'block';
} else {
ell.style.display = 'none';
}
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Andreas</title>
<!-- styles -->
<link rel="stylesheet" href="stil.css"/>
</head>
<body>
<div class="menu">
<div class="label">menu</div>
<div class="spacer"></div>
<!-- Knappar -->
<!-- Kabling -->
<div class="item"><a onclick="myFunction1()" href="javascript:void(0);">Kabling</a></div>
<!-- Programmering -->
<div class="item"><a onclick="myFunction2()" href="javascript:void(0);">Programmering</a></div>
<!-- Konvertering -->
<div class="item"><a onclick="myFunction3()" href="javascript:void(0);">Konvertering</a></div>
<!-- Bildbehandling -->
<div class="item"><a onclick="myFunction4()" href="javascript:void(0);">Bildbehandling</a></div>
<!-- Chrome devtools -->
<div class="item"><a onclick="myFunction5()" href="javascript:void(0);">Chrome Devtools</a></div>
<!-- Ellära -->
<div class="item"><a onclick="myFunction6()" href="javascript:void(0);">Ellära</a></div>
<!-- -->
<img src="" alt="">
</div>
<!-- Content -->
<!-- Kabling Text -->
<br>
<div id="KablingText"style="display:none;">
<font size=" 3">Sette opp nettverk</font>
<br><br>
<img class="subjimg" src="images/kabling.jpg">
<div class="subjtxt">Trekke kabler i veggkanal å sette på ethernetkontakt på kat 6 kabel.
Hva et patchpanel, svitj og etasjefordeler er. Anext (elektromagnetisk støy), Separasjon mellom starkstrømkabel og tele/datakabel SxP=A.Nek 700 regelbok
Cenelec Ekomloven. Strukturert kabling Fiber Potens Likstrøm og væxelstrøm Sinuskurva.
Diagonalrevolvert kabel. Slaglengde.Bølgelengde λ Multiplikatorer – atto – exa I=Strøm, Itensitè courant
</div>
</div>
<!-- Programmering Text -->
<div id="Programmering"style="display:none;">
<h2>Om programmering</h2>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa porro ducimus animi! Nisi, temporibus? Iure, doloremque quisquam eveniet, nesciunt, unde culpa recusandae inventore voluptates ipsum esse veritatis eius magni rem?
</div>
<!-- Konvertering Text -->
<div id="Konvertering"style="display:none;">
Binære tall og hvordan man regner med dem. Mega=miljon=1x106
Giga=miljard=1x109. Hz svingninger pes sek, Høy frekvens har dårligere rekkevidde lav frekvens har bedre rekkevidde.
</div>
<!-- Bildbehandling Text -->
<div id="Bildbehandling"style="display:none;">
Text om Bildbehandling
</div>
<!-- Chrome Devtools Text -->
<div id="ChromeDevtools"style="display:none;">
Text om Chrome Devtools
</div>
<!-- Ellära Text -->
<div id="Ellära"style="display:none;">
Text om Ellära
</div>
</div>
</body
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Welcome @user17319549, you already add logic which is good, only some more lines.
You can just simply hide others when you are showing one.
The below code is pure javascript, while below in jquery. Right now jquery is used in the industry very widely.
var vkabling = document.getElementById('KablingText');
var vprog = document.getElementById('Programmering');
var vkonv = document.getElementById('Konvertering');
var vbild = document.getElementById('Bildbehandling');
var vchrome = document.getElementById('ChromeDevtools');
var vell = document.getElementById('Ellära');
//pMenuValue - parameter menu value
function ShowHideContents(pMenuValue) {
debugger;
vkabling.style.display = 'none';
vprog.style.display = 'none';
vkonv.style.display = 'none';
vbild.style.display = 'none';
vchrome.style.display = 'none';
vell.style.display = 'none';
switch(pMenuValue) {
case 1:
vkabling.style.display = 'block';
break;
case 2:
vprog.style.display = 'block';
break;
case 3:
vkonv.style.display = 'block';
break;
case 4:
vbild.style.display = 'block';
break;
case 5:
vchrome.style.display = 'block';
break;
case 6:
vell.style.display = 'block';
break;
}
}
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Andreas</title>
<!-- styles -->
<link rel="stylesheet" href="stil.css"/>
</head>
<body>
<div class="menu">
<div class="label">menu</div>
<div class="spacer"></div>
<!-- Knappar -->
<!-- Kabling -->
<div class="item"><a onclick="ShowHideContents(1)" href="javascript:void(0);">Kabling</a></div>
<!-- Programmering -->
<div class="item"><a onclick="ShowHideContents(2)" href="javascript:void(0);">Programmering</a></div>
<!-- Konvertering -->
<div class="item"><a onclick="ShowHideContents(3)" href="javascript:void(0);">Konvertering</a></div>
<!-- Bildbehandling -->
<div class="item"><a onclick="ShowHideContents(4)" href="javascript:void(0);">Bildbehandling</a></div>
<!-- Chrome devtools -->
<div class="item"><a onclick="ShowHideContents(5)" href="javascript:void(0);">Chrome Devtools</a></div>
<!-- Ellära -->
<div class="item"><a onclick="ShowHideContents(6)" href="javascript:void(0);">Ellära</a></div>
<!-- -->
<img src="" alt="">
</div>
<!-- Content -->
<!-- Kabling Text -->
<br>
<div id="KablingText"style="display:none;">
<font size=" 3">Sette opp nettverk</font>
<br><br>
<img class="subjimg" src="images/kabling.jpg">
<div class="subjtxt">Trekke kabler i veggkanal å sette på ethernetkontakt på kat 6 kabel.
Hva et patchpanel, svitj og etasjefordeler er. Anext (elektromagnetisk støy), Separasjon mellom starkstrømkabel og tele/datakabel SxP=A.Nek 700 regelbok
Cenelec Ekomloven. Strukturert kabling Fiber Potens Likstrøm og væxelstrøm Sinuskurva.
Diagonalrevolvert kabel. Slaglengde.Bølgelengde λ Multiplikatorer – atto – exa I=Strøm, Itensitè courant
</div>
</div>
<!-- Programmering Text -->
<div id="Programmering"style="display:none;">
<h2>Om programmering</h2>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa porro ducimus animi! Nisi, temporibus? Iure, doloremque quisquam eveniet, nesciunt, unde culpa recusandae inventore voluptates ipsum esse veritatis eius magni rem?
</div>
<!-- Konvertering Text -->
<div id="Konvertering"style="display:none;">
Binære tall og hvordan man regner med dem. Mega=miljon=1x106
Giga=miljard=1x109. Hz svingninger pes sek, Høy frekvens har dårligere rekkevidde lav frekvens har bedre rekkevidde.
</div>
<!-- Bildbehandling Text -->
<div id="Bildbehandling"style="display:none;">
Text om Bildbehandling
</div>
<!-- Chrome Devtools Text -->
<div id="ChromeDevtools"style="display:none;">
Text om Chrome Devtools
</div>
<!-- Ellära Text -->
<div id="Ellära"style="display:none;">
Text om Ellära
</div>
</div>
</body
</html>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
As you are at the learning stage, try to learn Jquery simultaneously as its very usefull (https://jquery.com/ - jQuery is a fast, small, and feature-rich JavaScript library. )
var vkabling = $('#KablingText'); // document.getElementById('KablingText');
var vprog = $('#Programmering');//document.getElementById('Programmering');
var vkonv =$('#Konvertering');// document.getElementById('Konvertering');
var vbild = $('#Bildbehandling');//document.getElementById('Bildbehandling');
var vchrome = $('#ChromeDevtools');//document.getElementById('ChromeDevtools');
var vell = $('#Ellära');//document.getElementById('Ellära');
//pMenuValue - parameter menu value
function ShowHideContents(pMenuValue) {
debugger; //use debugger in javascript/jquery to debug the code
//this is the same javascript code in jquery side, only use show/hide function of jquery
vkabling.hide(); //vkabling.style.display = 'none';
vprog.hide(); //vprog.style.display = 'none';
vkonv.hide(); //vkonv.style.display = 'none';
vbild.hide(); //vbild.style.display = 'none';
vchrome.hide(); //vchrome.style.display = 'none';
vell.hide(); //vell.style.display = 'none';
switch(pMenuValue) {
case 1:
vkabling.show();//vkabling.style.display = 'block';
break;
case 2:
vkabling.show();//vprog.style.display = 'block';
break;
case 3:
vkonv.show();//vkonv.style.display = 'block';
break;
case 4:
vbild.show();//vbild.style.display = 'block';
break;
case 5:
vchrome.show();//vchrome.style.display = 'block';
break;
case 6:
vell.show();//vell.style.display = 'block';
break;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Andreas</title>
<!-- styles -->
<link rel="stylesheet" href="stil.css"/>
</head>
<body>
<div class="menu">
<div class="label">menu</div>
<div class="spacer"></div>
<!-- Knappar -->
<!-- Kabling -->
<div class="item"><a onclick="ShowHideContents(1)" href="javascript:void(0);">Kabling</a></div>
<!-- Programmering -->
<div class="item"><a onclick="ShowHideContents(2)" href="javascript:void(0);">Programmering</a></div>
<!-- Konvertering -->
<div class="item"><a onclick="ShowHideContents(3)" href="javascript:void(0);">Konvertering</a></div>
<!-- Bildbehandling -->
<div class="item"><a onclick="ShowHideContents(4)" href="javascript:void(0);">Bildbehandling</a></div>
<!-- Chrome devtools -->
<div class="item"><a onclick="ShowHideContents(5)" href="javascript:void(0);">Chrome Devtools</a></div>
<!-- Ellära -->
<div class="item"><a onclick="ShowHideContents(6)" href="javascript:void(0);">Ellära</a></div>
<!-- -->
<img src="" alt="">
</div>
<!-- Content -->
<!-- Kabling Text -->
<br>
<div id="KablingText"style="display:none;">
<font size=" 3">Sette opp nettverk</font>
<br><br>
<img class="subjimg" src="images/kabling.jpg">
<div class="subjtxt">Trekke kabler i veggkanal å sette på ethernetkontakt på kat 6 kabel.
Hva et patchpanel, svitj og etasjefordeler er. Anext (elektromagnetisk støy), Separasjon mellom starkstrømkabel og tele/datakabel SxP=A.Nek 700 regelbok
Cenelec Ekomloven. Strukturert kabling Fiber Potens Likstrøm og væxelstrøm Sinuskurva.
Diagonalrevolvert kabel. Slaglengde.Bølgelengde λ Multiplikatorer – atto – exa I=Strøm, Itensitè courant
</div>
</div>
<!-- Programmering Text -->
<div id="Programmering"style="display:none;">
<h2>Om programmering</h2>
<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa porro ducimus animi! Nisi, temporibus? Iure, doloremque quisquam eveniet, nesciunt, unde culpa recusandae inventore voluptates ipsum esse veritatis eius magni rem?
</div>
<!-- Konvertering Text -->
<div id="Konvertering"style="display:none;">
Binære tall og hvordan man regner med dem. Mega=miljon=1x106
Giga=miljard=1x109. Hz svingninger pes sek, Høy frekvens har dårligere rekkevidde lav frekvens har bedre rekkevidde.
</div>
<!-- Bildbehandling Text -->
<div id="Bildbehandling"style="display:none;">
Text om Bildbehandling
</div>
<!-- Chrome Devtools Text -->
<div id="ChromeDevtools"style="display:none;">
Text om Chrome Devtools
</div>
<!-- Ellära Text -->
<div id="Ellära"style="display:none;">
Text om Ellära
</div>
</div>
</body
</html>
<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>