tab jquery 标签页效果

最新推荐文章于 2025-12-27 11:46:02 发布

原创最新推荐文章于 2025-12-27 11:46:02 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #class #stylesheet #border #function #html

本文介绍如何使用CSS进行样式定义，并结合jQuery实现简单的Tab切换功能。通过鼠标悬停事件展示不同的内容区域，同时调整对应的Tab样式。该示例包含完整的HTML结构、外部样式表及jQuery交互代码。

css/css.css

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
a{
   text-decoration:none;
   margin-left:5px;
}
#showArea .child{
   display:none;
}
.parents .parent {
   background-color:gray;
   border:solid white;
}
#showArea{
   margin-top:3px;
   width:300px;
   height:100px;

    background-color:gray;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/css.css" mce_href="css/css.css"> <mce:script type="text/javascript" src="js/jquery.js" mce_src="js/jquery.js"></mce:script> <mce:script type="text/javascript" src="js/tab.js" mce_src="js/tab.js"></mce:script> </head> <body> <div id="tabs"> <div class="parents" > <span class="parent" id="parent1" index="1" ><a href="" >paretn1</a></span> <span class="parent" id="parent2" index="2" ><a href="" >parent2</a></span> </div> <div id="showArea" > <div class="child" id="child1" > <span class="item" ><a href="" >item11 </a></span> <span class="item"><a href="" >item12</a></span> <span class="item"><a href="" >item13</a></span> </div> <div class="child" id="child2" > <span class="item" ><a href="" >item21</a></span> <span class="item"><a href="" >item22</a></span> <span class="item"><a href="" >item23</a></span> </div> </div> </div> </body> </html> $(function (){ var parent= $(".parents .parent"); //parent.hover(on_mouseover,on_mouseout); parent.mouseover(on_mouseover); } ) function on_mouseover(){ var th=$(this); var index=th.attr("index"); var children=$("#showArea .child ") children.hide(); var child_show=children.filter("#child"+index); $(".parents .parent").css("border","solid white"); var parent_index=th.filter("#parent"+index); parent_index.css("border","solid gray"); child_show.show(); }