我對此完全陌生,我想知道我如何才能做到這一點,以便當您單擊其中一個鏈接時,只顯示與該鏈接相關的文本。因此,如果我單擊 Kabling,然后單擊 Programmering,則不應顯示有關 Kabling 的文本。由于我 3 周前才開始學習 html 和 css,因此我非常感謝對其他所有內容的任何反饋。為了能夠發布這個問題,我需要寫更多的文字,盡管我不知道該寫什么。
提前準備好
<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>```
uj5u.com熱心網友回復:
洗掉代碼重復
<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>
uj5u.com熱心網友回復:
當你展示一個的時候,你可以簡單地隱藏其他的。
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>
uj5u.com熱心網友回復:
歡迎@user17319549,您已經添加了很好的邏輯,只有更多行。
當你展示一個的時候,你可以簡單地隱藏其他的。
下面的代碼是純 javascript,而下面是 jquery。現在jquery在業界使用非常廣泛。
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>
As you are at the learning stage, try to learn Jquery simultaneously as its very useful (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:
vprog.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>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/351384.html
標籤:javascript html
上一篇:關于不應發生的文本重定向的問題
下一篇:我在設定<tbody>標簽的innerHTML時遇到了這個問題。使用document.getElementById選擇它后,它向我顯示了錯誤
