我的 html 文件是:
<!DOCTYPE html>
<html>
<body>
<nav>
<ul id="leftNavUl">
<li><a id="sr" href="#staticRoutingFiledset">Static Routing</a></li>
<li><a id="vp" href="#vpn">VPN</a></li>
<li><a id="fw" href="#firewall">Firewall</a></li>
<li><a id="ip" href="#IPS">IPS</a></li>
</ul>
</nav>
<div class="features"><fieldset>ABC</fieldset></div>
<div class="features">A</div>
<div class="features">B</div>
<div class="features">C</div>
</body>
</html>
我的CSS文件是
.features{
width: 760px;
height:370px;
margin-bottom: 12px;
border-color: #000000;
background-color: #FFFFFF;
position:absolute;
top:12px;
left:140px;
}
ul#leftNavUl {
color:#FFF;
list-style-type:none;
margin-top:41px;
}
ul#leftNavUl li {
background-color:#0357ea;
margin:1px;
width:120px;
}
#leftNav ul#leftNavUl li a {
color:#FFF;
display:block;
width:120px;
height:30px;
text-align:center;
text-decoration:none;
line-height:30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
我的 js 文件应该能够在右侧显示和隐藏我正在左栏中创建一个菜单并在右栏中显示对应的 div。
你能告诉我我在js文件中做的是否正确吗:
document.getElementById('#vp').onClick()=function(){
//displaying all the other divs and hiding the overlapping div
// somehow its not working please suggest
}
最佳答案
试试这段代码。它将获取每个列表项并在单击时显示相应的 div 并隐藏其余部分。
$('#leftNavUl li').click(function(e){
$('.features').hide().eq($(this).index()).show();
});
关于javascript - 通过 div 显示数据并使用显示和隐藏功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20071163/