jQuery简单实现tab选项卡切换效果 - Web前端

作者：98wpeu发布时间：2026-08-19分类：网页前端技术浏览：65

导读：抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~效果图：代码：<!DOCtypehtml><HTML><he...

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

效果图：

代码：

<!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>

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

标签：选项卡效果简单 Web tab jQuery

上一篇：基于jQuery实现点击列表加载更多效果 - Web前端
下一篇：jQuery页面元素动态添加后绑定事件丢失方法,非 live - Web前端

jQuery简单实现tab选项卡切换效果 - Web前端

相关推荐