<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/网页特效" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <title>简单的tab效果</title> <style type="text/css教程"> * { padding: 0px; margin:0px } body { text-align: center } .wrap ul { overflow: hidden } .wrap li { float: left; list-style: none; margin-right: 10px; cursor: pointer; padding: 2px 5px } .link { cursor: pointer; color: #F00 } .wrap { width: 200px; margin: 50px auto } .wrap, .ellips教程is { font-size: 12px; width: 200px; } .tab_div div { display: none; padding: 10px; } .tab_div { text-align: left; border: 1px #CCC solid; height: 200px; clear: both } .cur { background: #060; color: #FFF } #setTab_2{ margin-top: 20px; } </style> <script type="text/javascript"> $(document).ready(function() { //tab $("#setTab").setTab(); $("#setTab_2").setTab(); }); /*插件代码*/ (function ($) { $.fn.setTab = function () { var getTab=$(this),//this指向调用函数的ID panels = getTab.children("div.tab_div").children("div"), tabs = getTab.find("li"); return this.each(function(){ $(tabs).click(function(e) { var index = $.inArray(this, $(this).parent().find("li"));//this指向li if (panels.eq(index)[0]) { $(tabs).removeClass("cur"); $(this).addClass("cur"); panels.css("display", "none").eq(index).css("display", "block"); } }); }); } })(jQuery); </script> </head> <body class="wrap"> <div id="setTab"> <ul class="tab_nav"> <li class="cur">国事</li> <li>军情</li> <li>图片</li> </ul> <div class="tab_div"> <div style="display: block">国事</div> <div>军情</div> <div>图片</div> </div> </div> <div id="setTab_2"> <ul class="tab_nav"> <li>国事</li> <li class="cur">军情</li> <li>图片</li> </ul> <div class="tab_div"> <div>国事</div> <div style="display: block">军情</div> <div>图片</div> </div> </div> </body> </html>
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索函数
, div
this
jquery 简单tab切换、jquery tab切换效果、简单的jquery分页效果、简单的jquery动画效果、jquery简单效果,以便于您获取更多的相关知识。
时间: 2024-09-26 10:08:59