通过div显示数据并使用显示和隐藏功能

Question

My html file is : 我的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>

My Css File is 我的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;
}

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. 我的js文件应该能够在右侧显示和隐藏，我在左栏中创建菜单，并在右栏中显示相应的div。

Can you tell me whether I am doing it right in the js file: 您能告诉我我是否在js文件中正确执行此操作：

document.getElementById('#vp').onClick()=function(){
    //displaying all the other divs and hiding the overlapping div 
    // somehow its not working please suggest 
}

Answer 1

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();
});

DEMO 演示

Answer 2

JSBin 联合会

I think this will help you 我想这对你有帮助

In you HTML anchor tag add a mousedown() event and call it as below 在您的HTML锚标记中，添加mousedown（）事件并按如下所示调用它

<li><a id="vp" href="#vpn" onmousedown="call()">VPN</a></li>

in JS 在JS中

function call(){
    alert('Hai');
}

Answer 3

You could do: 您可以这样做：

document.getElementById('vp').onclick = function() {
    //displaying all the other divs and hiding the overlapping div 
    // somehow its not working please suggest 
}

Answer 4

Try this code. 试试这个代码。 It will take each list item and on click, show the corresponding div and hide the rest. 它将使用每个列表项，然后单击以显示相应的div并隐藏其余的。

$('#leftNavUl li').click(function(e){
   $('.features').hide().eq($(this).index()).show();
});

JSFiddle JSFiddle

通过div显示数据并使用显示和隐藏功能

问题描述

4 个解决方案

解决方案1
0 2013-11-19 12:13:03

解决方案2
0 2013-11-19 12:13:25

解决方案3
0 2013-11-19 12:19:05

解决方案4
0 已采纳 2013-11-19 12:19:25

通过div显示数据并使用显示和隐藏功能

问题描述

4 个解决方案

解决方案1 0 2013-11-19 12:13:03

解决方案2 0 2013-11-19 12:13:25

解决方案3 0 2013-11-19 12:19:05

解决方案4 0 已采纳 2013-11-19 12:19:25

解决方案1
0 2013-11-19 12:13:03

解决方案2
0 2013-11-19 12:13:25

解决方案3
0 2013-11-19 12:19:05

解决方案4
0 已采纳 2013-11-19 12:19:25