通過div顯示數據並使用顯示和隱藏功能
[英]Displaying Data through div and using show and hide functionalities
問題描述
我的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
}
4 個解決方案
解決方案1
0 2013-11-19 12:13:03
嘗試這個
<div id="navi">
<ul>
<li><a class='link1' href="#first">First link</a></li>
<li><a class='link2' href="#second">Second link</a></li>
<li><a class='link3' href="#third">Third link</a></li>
</ul>
</div>
<div class='link1' id="content1" style="display:block;">
</div>
<div class='link2' id="content2" style="display:none;">
</div>
<div class='link3' id="content3" style="display:none;">
</div>
腳本
$("#navi a").click(function(){
$('div[id^="content"]').hide();
$("div" + "." + $(this).attr('class') ).show();
});
解決方案2
0 2013-11-19 12:13:25
我想這對你有幫助
在您的HTML錨標記中，添加mousedown（）事件並按如下所示調用它
<li><a id="vp" href="#vpn" onmousedown="call()">VPN</a></li>
在JS中
function call(){
alert('Hai');
}
解決方案3
0 2013-11-19 12:19:05
您可以這樣做：
document.getElementById('vp').onclick = function() {
//displaying all the other divs and hiding the overlapping div
// somehow its not working please suggest
}
解決方案4
0 已采納 2013-11-19 12:19:25
試試這個代碼。 它將使用每個列表項，然后單擊以顯示相應的div並隱藏其余的。
$('#leftNavUl li').click(function(e){
$('.features').hide().eq($(this).index()).show();
});
jQuery 完成隱藏和顯示功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.