从菜单中隐藏和显示div

我对JavaScript很新手，无法获得基于所选菜单项显示/隐藏div的页面的工作版本。我总是只能看到菜单项。如何从菜单访问和浏览html内容部分。从菜单中隐藏和显示div

隐藏是probabbly很容易的，是这样的：

$("#div1").hide(); 
$("#div2").hide();

但我还没有找到一种方式来显示相关的菜单选择和隐藏休息一个div。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > 
<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <style> 
     // menu css 
     .hor_menu{display: inline-block;} 
     .hor_menu{ height: 25; font-size: 18px;} 
     .hor_menu li{list-style: none; float: left; margin-right: 4px; padding: 5px;} 
     .hor_menu li.active { 
     background-color: #e9e9e9; 
     } 
     .hor_menu li:hover {text-decoration: underline;} 
    </style> 
    </head> 
    <body> 
    //top menu 
    <ul class="hor_menu" id="menu"> 
     <li a class="active" id="item1"><a>Menu item 1</a></li> 
     <li id="item2">Menu item 2</li> 
     <li id="item3">Menu item 3</li> 
    </ul> 
    // content divs 
    <div id="div1"> 
     <p>Show me when menu item 1 selected</p> 
    </div> 
    <div id="div2"> 
     <p>Show me when menu item 2 selected</p> 
    </div> 
    <div id="div3"> 
     <p>Show me when menu item 3 selected</p> 
    </div> 
    <script type="text/javascript"> 
     var make_menuitem_active = function() 
     { 
     //Get menu siblings 
     var siblings =($(this).siblings()); 

     //Deactivate selection 
     siblings.each(function (index) 
      { 
      $(this).removeClass('active');  
      } 
     ) 
     //Add the clicked button class 
     $(this).addClass('active'); 
     } 
     //Attach events to menu 
     $(document).ready(
     function() 
     { 
      $(".hor_menu li").click(make_menuitem_active); 
     } 
    ) 
    </script> 
    </body> 
</html>

来源

2017-10-09 oneFinn

下面是使用的方法jQuery的隐藏/显示：

$(document).ready(function() { 
 
    make_menuitem_active(); 
 
}) 
 

 
function make_menuitem_active() { 
 
    $("#div1").show(); 
 
    $("#div2").hide(); 
 
    $("#div3").hide(); 
 
    $("#item1").on("click", function() { 
 
    $(this).addClass("active"); 
 
    $(this).siblings().removeClass("active"); 
 
    $("#div1").show(); 
 
    $("#div1").siblings("div").hide(); 
 
    }) 
 
    $("#item2").on("click", function() { 
 
    $(this).addClass("active"); 
 
    $(this).siblings().removeClass("active"); 
 
    $("#div2").show(); 
 
    $("#div2").siblings("div").hide(); 
 
    }) 
 
    $("#item3").on("click", function() { 
 
    $(this).addClass("active"); 
 
    $(this).siblings().removeClass("active"); 
 
    $("#div3").show(); 
 
    $("#div3").siblings("div").hide(); 
 
    }) 
 
}

.hor_menu { 
 
    display: inline-block; 
 
} 
 

 
.hor_menu { 
 
    height: 25; 
 
    font-size: 18px; 
 
} 
 

 
.hor_menu li { 
 
    list-style: none; 
 
    float: left; 
 
    margin-right: 4px; 
 
    padding: 5px; 
 
} 
 

 
.hor_menu li.active { 
 
    background-color: #e9e9e9; 
 
} 
 

 
.hor_menu li:hover { 
 
    text-decoration: underline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="hor_menu" id="menu"> 
 
    <li class="active" id="item1"><a>Menu item 1</a></li> 
 
    <li id="item2">Menu item 2</li> 
 
    <li id="item3">Menu item 3</li> 
 
</ul> 
 
<div id="div1"> 
 
    <p>Show me when menu item 1 selected</p> 
 
</div> 
 
<div id="div2" class="hide"> 
 
    <p>Show me when menu item 2 selected</p> 
 
</div> 
 
<div id="div3" class="hide"> 
 
    <p>Show me when menu item 3 selected</p> 
 
</div>

来源

2017-10-09 18:13:56 Syden

从菜单中隐藏和显示div

回答

相关问题