本帖最后由 灰儿 于 2011-11-20 17:02 编辑
效果:鼠标移动到任意选项,该选项的背景就改变,该选项下的内容也改变。默认情况下,显现第一个选项的背景跟内容。
Jquery 实现Tab效果,思路就是普通的用js的思路控制的,脚本之家发布过更精简的代码,这个比较适合一直用js开始学用jquery控制的朋友一个参考。
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title></title>
- <script src="http://img.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script>
- <style type="text/css">
- .tab
- {
- background-color: #FAFAFA;
- margin: 5px 8px;
- padding: 5px 10px;
- }
- .tab p span
- {
- background-color: #EFEFEF;
- border: 1px solid #CCCCCC;
- cursor: pointer;
- margin-right: 6px;
- padding: 2px 5px;
- }
- .tab p span.current
- {
- background-color: #FAFAFA;
- border-bottom-color: #fafafa;
- }
- .tab p
- {
- border-bottom: 1px solid #CCCCCC;
- font-weight: bold;
- padding: 0 10px 2px;
- }
- .tab li
- {
- border-bottom: 1px dotted #CCCCCC;
- padding-bottom: 3px;
- margin: 5px 0;
- }
- .tab .mhot, .tab.allhot
- {
- display: none;
- }
- </style>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式
- $(".tab ul:not(:first)").hide(); //隐藏其它的UL
- $(".tab span").mouseover(function() {
- $(".tab span").removeClass("current"); //去掉所有SPAN的样式
- $(this).addClass("current");
- $(".tab ul").hide();
- $("." + $(this).attr("id")).fadeIn('slow');
- });
- });
- </script>
- </head>
- <body>
- <div class="tab">
- <p>
- <span id="tab1">tab1</span> <span id="tab2">tab2</span> <span id="tab3">tab3</span></p>
- <ul class="tab1">
- <li>脚本之家</li><li>www.jb51.net</li><li>我和我</li></ul>
- <ul class="tab2">
- <li>一花一世办</li><li>一草一天堂</li></ul>
- <ul class="tab3">
- <li>阿里巴巴</li><li>阿里巴巴</li><li>一草一天堂</li><li>我和我的祖国</li><li>最爱的地方</li></ul>
- </div>
- </body>
- </html>
复制代码
|