简单的选项卡

来源：互联网发布：干皮乳液推荐知乎编辑：程序博客网时间：2024/04/29 03:12

效果图：
这里写图片描述

重点：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();        });    });});

0 0