实现一个简单的tab选项卡

最新推荐文章于 2022-04-05 19:07:27 发布

xjb许

最新推荐文章于 2022-04-05 19:07:27 发布

阅读量482

点赞数

分类专栏： javascript、排序

本文链接：https://blog.csdn.net/xjb19901008/article/details/25924719

版权

javascript、排序专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
  <title>tab选项卡</title>
  <meta charset="utf8"/>
<style type="text/css">
*{ margin:0 ; padding:0;}
li { 
	list-style-type:none;
}
.tab .title li { 
        border-radius:5px 0 5px 0;       
	cursor:pointer; 
	height:30px;     
	line-height:30px; 
	background:#ccc; 
	float:left; 
	margin-right:2px; 
	padding:0 10px;
}
.tab .title li.on { background:blue;}
.tab .subcontent { display:none;}
.tab .content { 
        border-radius:0 5px 5px 5px; 
	border:1px solid #ccc; 
	min-height:160px; 
	clear:both;
        width:50%;
}



</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>


<body style="padding-left:100px;">
  <div class="tab" id="hover">
      <ul class="title">
         <li class="on">选项1</li>
         <li>选项2</li>
         <li>选项3</li>
      </ul>
      <div class="content">
          <div class="subcontent" style="display:block;">
              内容1
           </div>
           <div class="subcontent">
              内容2
           </div>
           <div class="subcontent">
              内容3
           </div>

      </div>
  </div>
</body>
<script>
   function tab(nav,type){
                var $nav = $(nav);
                var $title = $(".title", $nav);
                
                $title.find("li").bind(type,function(){
                        $this = $(this);
                        var index = $this.prevAll().length;
                        $this.siblings("li").removeClass("on").end().addClass("on");
                        $this.parent().next(".content").find(".subcontent").hide().eq(index).show();
                })
        }
            
        tab("#hover","mouseover")
</script

</html>