Displaying Data through div and using show and hide functionalities
Question
My html file is :
<!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>
My Css File is
.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;
}
My js file should be able to show and hide in the right side I am creating a menu in the left column and showing coorresponding div in the right column.
Can you tell me whether I am doing it right in the js file:
document.getElementById('#vp').onClick()=function(){
//displaying all the other divs and hiding the overlapping div
// somehow its not working please suggest
}
4 answers
solution1
0 2013-11-19 12:13:03
Trythis
<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>
Script
$("#navi a").click(function(){
$('div[id^="content"]').hide();
$("div" + "." + $(this).attr('class') ).show();
});
solution2
0 2013-11-19 12:13:25
I think this will help you
In you HTML anchor tag add a mousedown() event and call it as below
<li><a id="vp" href="#vpn" onmousedown="call()">VPN</a></li>
in JS
function call(){
alert('Hai');
}
solution3
0 2013-11-19 12:19:05
You could do:
document.getElementById('vp').onclick = function() {
//displaying all the other divs and hiding the overlapping div
// somehow its not working please suggest
}
solution4
0 ACCPTED 2013-11-19 12:19:25
Try this code. It will take each list item and on click, show the corresponding div and hide the rest.
$('#leftNavUl li').click(function(e){
$('.features').hide().eq($(this).index()).show();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.