简单的选项卡

最新推荐文章于 2021-05-31 12:44:49 发布

原创最新推荐文章于 2021-05-31 12:44:49 发布 · 581 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css

效果图：
这里写图片描述

重点：z-index的使用
html代码：

<!DOCTYPE html>
<html>
<head>
<meta lang="zh">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="j-aside.css">
</head>
<body>
<div id="nav">
<ul id="menu">
//初始化选项卡
<li class="tabClick">手机</li>
<li>电脑</li>
<li>平板</li>
<li>手表</li>
</ul>
<ul id="content">
//初始化选项卡
<li class="toTab">手机</li>
//这里可以自己扩展列表，实现更多内容
<li>电脑</li>
<li>平板</li>
<li>手表</li>
</ul>
</div>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/j-aside.js"></script>
</body>
</html>

css代码（注：一些不是很重要的样式定义在了base.css里，这里就不列了）：

#menu li {
  float:left;
  width:64px;
  text-align:center;
  cursor:pointer; 
  padding:3px;   //width和padding的值要计算精确
}
#menu li.tabClick {
  //只有在relative或absolute的条件下才能用z-index 
  position:relative;
  z-index:100;
  background-color:#f3f2e7;
  font-weight:bold;
  border:1px solid #000;
  border-bottom:0;
}
#content {
  position:relative;
  top:-1px; //相对于上一元素的底部
  clear:both;  //避免上面float的影响
  background-color:#f3f2e7;
  border:1px solid #000;
  width:280px;
  height:180px;
}
#content li {
  display:none;
}
#content li.toTab {
  display:block;
}

js代码：

$(document).ready(function () {
    "use strict";
    $("#menu li").each(function (index) {
        $(this).click(function () {
            $("#menu li").removeClass("tabClick");
            $(this).addClass("tabClick");
            $("#content li").hide();
            $("#content li:nth-child(" + (index + 1) + ")").show();
            //或者$("content li:eq(" + index + ")").show();
        });
    });
});

标签

#z-index