Question

我的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 
}

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>

脚本

$("#navi a").click(function(){

    $('div[id^="content"]').hide();

    $("div" + "." + $(this).attr('class') ).show();
});

DEMO

Answer 2

JSBin

我认为这会对您有所帮助

在您的HTML锚标记中添加mousedown()事件并将其命名为

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

JS中的

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

Answer 3

你可以这样做：

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

Answer 4

试试这段代码。它将获取每个列表项并单击，显示相应的div并隐藏其余部分。

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

JSFiddle

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

4 个答案: