选项卡

最新推荐文章于 2023-07-12 23:55:28 发布

fxqyilu

最新推荐文章于 2023-07-12 23:55:28 发布

阅读量200

点赞数

分类专栏：部分常见的效果

本文链接：https://blog.csdn.net/fxqyilu/article/details/81390427

版权

部分常见的效果专栏收录该内容

10 篇文章 0 订阅

订阅专栏

选项卡是最常见的了，我最近在用，所以我就把两个方法放上来吧，给我自己留个例子。

第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0; padding: 0;}
        .box{
            width: 100%;
            margin: 50px;
        }
        .box ul{
            width: 100%;
			margin-bottom: 50px;
            list-style: none;
        }
        .box ul li{
           float: left;
            text-align: center;
            width: 100px;
            height: 100px;
            line-height: 100px;
            font-size: 16px;
            border:1px solid black;
			border-radius: 5px;
            box-sizing: border-box;
            margin: 20px;
            cursor: pointer;
        }
        .box span{
            display: none;
            text-align: center;
        }
        .box span .one{
        	float: left;
        	width: 50px;
        	height: 50px;
        	border: 1px solid black;
        	border-radius: 5px;
        	margin: 20px;
        	font-size: 16px;
        	line-height: 50px;
        }
        .box span .one:hover{
        	background-color: #ADD8E6;
        }
        .box li.now{
            background: lightblue;
        }
        .box span.now{
            display: block;
        }
		.box ul:after{
			display: block;
			content: "";
			clear: both;
		}
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="now">A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>

        </ul>
        <span class="now">
        	<div class="one">
        		a
        	</div>
        	<div class="one">
        		a
        	</div>
        	<div class="one">
        		a
        	</div>
        	<div class="one">
        		a
        	</div>
        </span>
        <span>
        	<div class="one">
        		b
        	</div>
        	<div class="one">
        		b
        	</div>
        	<div class="one">
        		b
        	</div>
        	<div class="one">
        		b
        	</div>
        </span>
        <span>
        	<div class="one">
        		c
        	</div>
        	<div class="one">
        		c
        	</div>
        	<div class="one">
        		c
        	</div>
        	<div class="one">
        		c
        	</div>
        </span>
        <span>
        <div class="one">
        		d
        	</div>
        	<div class="one">
        		d
        	</div>
        	<div class="one">
        		d
        	</div>
        	<div class="one">
        		d
        	</div>
		</span>
		
    </div>
</body>
<script>
    // 1. 获取.box下的li和span标签(元素)
    var liList = document.getElementsByTagName('li');
    var spanList = document.getElementsByTagName('span');
    // 2. 给每个li都添加上点击事件
    for (var i=0;i<liList.length;i++) {
        var li = liList[i];
        //console.log(liList[i], spanList[i]);
        li.onclick = function(){
            console.log(this.index);
            // 3. 当点击时先清除选中状态
            for (var i=0;i<liList.length;i++){
                liList[i].className = '';
                spanList[i].className = '';
            }
            // 4. 获取当前是第几个li
            var now = this.index;
            // 5. 从所有的span中选出对应下标签的span
            this.className = 'now';
            spanList[now].className = 'now';
        };
        // 6. 给li绑定一个属性用于记录这是第几个li
        li.index = i;
    }
</script>
</html>

第二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚点</title>
    <style>
        *{margin: 0;padding: 0;}
        a{
            text-decoration: none;
        }
        .clickNav{
            width: 100%;
            height: 200px;
        }
        .nav{
            float: left;
            width: 100px;
            height: 100px;
            background-color: #e3e3e3;
            border: 1px solid black;
            border-radius: 5px;
            margin:20px;
            text-align: center;
            line-height: 100px;
        }
        .container{
            width: 500px;
            height: 200px;
            text-align: center;
            line-height: 50px;
            overflow: hidden
        }
        .container .nav1{
            width: 100%;
            height: 200px;
            text-align: center;
        }
        .container #nav1{
            background-color: #00CCCC;
        }
        .container #nav2{
            background-color: #5bc0de;
        }
        .container #nav3{
            background-color: #2D93CA;
        }
        .container ul li{
            list-style: none;
            float: left;
            width: 80px;
            height: 50px;
            background-color: #00CCFF;
            border:1px solid black;
            border-radius: 5px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="clickNav">
    <div class="nav"><a href="#nav1"><p class="click1">点击1</p></a></div>
    <div class="nav"><a href="#nav2"><p class="click1">点击1</p></a></div>
    <div class="nav"><a href="#nav3"><p class="click1">点击1</p></a></div>
</div>
<div class="container">
   <div id="nav1" class="nav1">
       <ul class="content1">
           <li><a href="">1</a></li>
           <li><a href="">2</a></li>
           <li><a href="">3</a></li>
           <li><a href="">4</a></li>
           <li><a href="">5</a></li>
       </ul>
   </div>
   <div id="nav2" class="nav1">
       <ul class="content2">
           <li><a href="">11</a></li>
           <li><a href="">12</a></li>
           <li><a href="">13</a></li>
           <li><a href="">14</a></li>
           <li><a href="">15</a></li>
       </ul>
   </div>
   <div id="nav3" class="nav1">
       <ul class="content3">
           <li><a href="">21</a></li>
           <li><a href="">22</a></li>
           <li><a href="">23</a></li>
           <li><a href="">24</a></li>
           <li><a href="">25</a></li>
       </ul>
   </div>
</div>
</body>
</html>