[英]Hiding and showing div's from menu
我對javascript不太熟悉,無法獲得將基於所選菜單項顯示/隱藏div的頁面的工作版本。 我總是總是只有菜單項可見。 如何從菜單訪問和控制html的內容部分。
隱藏可能很容易,例如:
$("#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>
這是使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.