jQuery简单实现tab选项卡切换效果

2019-11-20 09:39:27

字体：大中小

来源：转载

供稿：网友

抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~

效果图：

//files.VeVB.COm/file_images/article/201606/201606201125406.jpg

代码：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="http://apps.bdimg.com/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, .ellipsis {  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>

以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：JS作为值的函数用法示例

下一篇：JS事件添加和移出的兼容写法示例