Html
    Css
    Js

    
                        
* {
	margin:0px;
	padding:0px;
	list-style:none;
}
#all {
	width:550px;
	margin:0 auto;
}
#option {
	height:38px;
	line-height:38px;
	border-bottom:1px solid #999;
	border-left:1px solid #999;
}
#option li {
	float:left;
	padding:0 30px;
	background:#f5f5f5;
	border-right:1px solid #999;
	border-top:1px solid #999;
	height:37px;
	cursor:pointer;
}
#option li.active {
	height:38px;
	background:#fff;
}
#card {
	border:1px solid #999;
	border-top:none;
}
#card li {
	height:200px;
	display:none;
	line-height:200px;
	text-align:center;
}
#card li.active {
	display:block;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.1
 立即下载

js标签页(选项卡)

有不懂的直接私聊问我 , 有问必回 ! 谢谢大家关注 , 我个人非常喜欢用 一些用户体验好的特效 这样自己也觉得舒服 . 可能和处女座有关 - - . Dva爱你呦

5
      风之乱舞0
      2017/4/8 14:07:30

      为什么我把js css html  放到一个页面怎么就不行了了

          酷头丶0
          2017/4/12 10:40:45

          不可能啊, 我的就全部都在一个页面里面 . 没有link    js 就引入了1.8.3/jquery.min.js    下面的点击事件 都在一个页面里

      回复
      周围0
      2017/4/6 17:47:53

      最后一个选项卡点击后没对齐额

          酷头丶0
          2017/4/6 17:50:58

          恩恩是的. 谢谢提醒哈  这个小问题应该用起来是没有问题的,简单调一下就OK啦 , 遇到问题告诉我哈

      回复
      酷头丶0
      2017/3/29 8:56:13

      欢迎大家留言哈

      回复