jquery的mouseover 切换

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>jquery的tab栏</title>  
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>  
<style>  
#sidebar-tab {  
    border:1px solid #ccf;  
    margin-bottom:1.5em;  
    overflow:hidden;  
    width:235px  
}  
#tab-title h3 {  
    color:#666;  
    font-size:15px;  
    font-weight:400;  
}  
#tab-title .selected {  
    color:#356aa0;  
    border-bottom:0px;  
}  
/*标题被选中时的样式*/   
#tab-title span {  
    padding:5px 9px 5px 10px;  
    border:1px solid #ccf;  
    border-right:0px;  
    margin-left:-1px;  
    cursor:pointer;  
}  
#tab-content .hide {  
    display:none;  
}  
/*默认让第一块内容显示,其余隐藏*/   
#tab-content ul {  
    padding:5px 10px;  
    overflow:hidden;  
}  
#tab-content ul li {  
    padding-top:5px;  
    height:20px;  
}  
</style>  
</head>  
<body>  
<div id="sidebar-tab">  
<div id="tab-title">  
  <h3>
 <span class="selected">最新评论</span>
 <span>近期热评</span>
 <span>随机文章</span>
  </h3>  
</div>  
<div id="tab-content">  
  <ul>  
    <li>1234567890-1</li>  
  </ul>  
  <ul class="hide">  
    <li>1234567890-2</li>  
  </ul>  
  <ul class="hide">  
    <li>1234567890-3</li>  
  </ul>  
</div>  
</div>  
  
<script>  
$('#tab-title span').mouseover(function() {  
    $(this).addClass("selected").siblings().removeClass(); //removeClass就是删除当前其他类;只有当前对象有addClass("selected");siblings()意思就是当前对象的同级元素,removeClass就是删除;   
    $("#tab-content > ul").hide().eq($('#tab-title span').index(this)).show();$(this).index();//当前所在的元素位置  
});  
</script>  
  
</body>  
</html>  
阅读更多
换一批

没有更多推荐了,返回首页