和其它的區別是用了.siblings()這個函數，不知道功能有什麼影響。
HTML 代碼：
<!DOCTYPE html>
<html>
<head>
<title>Menu Navigator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div class="tabbed-menu">
<ul class="tabs">
<li id="tab_menu_1" class="selected">tab_menu_1</li>
<li id="tab_menu_2">tab_menu_2</li>
<li id="tab_menu_3">tab_menu_3</li>
<li id="tab_menu_4">tab_menu_4</li>
</ul>
<div class="content">
<div class="page" >my text1</div>
<div class="page" style="display:none;">my text2</div>
<div class="page" style="display:none;">my text3</div>
<div class="page" style="display:none;">my text4</div>
</div>
</div>
</body>
</html>CSS代碼：
/* This div class is the container for our menu.
It defines attributes for everything inside. */
div.tabbed-menu {
font-family: "Helvetica";
font-size: 15px;
width: 600px;
}
/* This ul class defines how your menu options
will be arranged and also gives us a nice
dividing line between the menu and the content. */
ul.tabs {
text-align: center;
list-style: none;
position: relative;
margin: 0;
padding: 0;
line-height: 26px;
color: #0088CC;
border-bottom: 1px solid #DDDDDD;
}
/* This defines the look of the individual tabs of
your menu when they are contained in a tabs class ul */
ul.tabs li {
margin-bottom: -1px;
padding: 3px 10px 0 10px;
border: 1px solid #DDDDDD;
background: #EFEFEF;
/* inline-block tells the browser to arrange the list
elements in a line rather than each element on its
own line. */
display: inline-block;
/* The attributes here round the top left
and right corners of the tabs. */
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/* This defines what a tab should look like when selected */
ul.tabs li.selected {
background: #FFF;
border-bottom-color: transparent;
}
/* This defines how a tab looks when your mouse hovers above it */
ul.tabs li:hover {
color: #333333;
cursor: pointer;
background: #FFFFFF;
}
/* This centers all of the text within a page element */
div.page {
text-align: center;
}
/* This overrides the text centering we defined above if
the text is within a list and also tells your browser
not to put bullet points next to the text. */
div.page li {
text-align: left;
list-style-type: none;
}JQUERY代碼：
$(document).ready(function(){
$('.tabs li').mouseover(function(){
if(!$(this).hasClass('selected')){
$(this).addClass('selected');
$(this).siblings().removeClass('selected');
var menuNum = parseInt($(this).attr('id').substr(9),10) - 1;
var $contentDiv = $(".content div:eq(" + menuNum + ")");
$contentDiv.css('display','block');
$contentDiv.siblings().css('display','none');
}
});
});
