jQuery最简洁实现tab选项切换

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年9月1日07:40:35 评论 37 views

这次给大家带来jQuery最简洁实现tab选项切换,jQuery实现tab选项切换的注意事项有哪些,下面就是实战案例,一起来看一下。

效果图:

https://img.php.cn/upload/article/000/061/021/7a3c473647243806736aeee624890a02-0.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_p p {
  display: none;
  padding: 10px;
}
.tab_p {
  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("p.tab_p").children("p"),
      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">
<p id="setTab">
 <ul class="tab_nav">
  <li class="cur">国事</li>
  <li>军情</li>
  <li>图片</li>
 </ul>
 <p class="tab_p">
  <p style="display: block">国事</p>
  <p>军情</p>
  <p>图片</p>
 </p>
</p>
<p id="setTab_2">
 <ul class="tab_nav">
  <li>国事</li>
  <li class="cur">军情</li>
  <li>图片</li>
 </ul>
 <p class="tab_p">
  <p>国事</p>
  <p style="display: block">军情</p>
  <p>图片</p>
 </p>
</p>
</body>
</html>

相信看了本文案例你已经掌握了方法,更多精彩请关注php教程其它相关文章!

推荐阅读:

jquery实现元素拖动排序(附代码)

jQuery+CSS实现标签分栏切换(附代码)

以上就是jQuery最简洁实现tab选项切换的详细内容,更多请关注php教程其它相关文章!

继续阅读
企鹅博客
  • 本文由 发表于 2020年9月1日07:40:35
  • 转载请务必保留本文链接:https://www.qieseo.com/399711.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: