js实现图片选项卡

最新推荐文章于 2022-03-27 21:46:47 发布

三生梅雨渡潇潇

最新推荐文章于 2022-03-27 21:46:47 发布

阅读量911

点赞数 4

分类专栏： js题博客文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_43435403/article/details/108165334

版权

博客同时被 2 个专栏收录

61 篇文章 1 订阅

订阅专栏

js题

19 篇文章 0 订阅

订阅专栏

一、题目：
实现图片式的tabs选项卡，如下图效果
在这里插入图片描述

二、解题思路
1.这是一个简单的tabs选项卡的形式，可以根据tabs选项卡的方式来做，对于tabs选项卡，可看以下链接的文章内容：
js实现tabs选项卡
2.先将上面的图片通过定位重叠，再隐藏
3.当点击某一个li,对于的图片出现，并且改变相关样式
4.当点击下一个li，上一次的li样式恢复，上一次的图片隐藏
5.初始状态，直接调用点击函数

三、代码：
1.html代码

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<title>Document</title>    
<!-- 引入css样式文件 -->    
<link rel="stylesheet" href="day1.css">    
<!-- 引入字体图标文件 -->    
<link rel="stylesheet" href="font/iconfont.css">
</head>
<body>    
<div id="divBox">        
	<!-- 放图片的div  -->        
	<div class="imgDiv">            
	<img src="images/index_slide_con01.png" alt="">        
	</div>        
	<div class="imgDiv">            
	<img src="images/index_slide_con02.png" alt="">        
	</div>        
	<div class="imgDiv">            
	<img src="images/index_slide_con03.png" alt="">        
	</div>        
	<div class="imgDiv">            
	<img src="images/index_slide_con04.png" alt="">        
	</div>        
	<div class="imgDiv">            
	<img src="images/index_slide_con05.png" alt="">        
	</div>
	        <!-- 下面的选项 -->        
        <ul id="myUl">            
	        <li id = 'myLi1'onclick="xianshi(this,0)">
	        	<span class="iconfont icon-yunxiazai myspan">
	        </span>
	        </li>            
	        <li onclick="xianshi(this,1)">
	        	<span class="iconfont icon-media myspan"></span>
	        </li>            
	        <li onclick="xianshi(this,2)">
	        	<span class="iconfont icon-navicon-rqfz myspan"></span>
	        </li>            
	        <li onclick="xianshi(this,3)">
	        	<span class="iconfont icon-diannao myspan"></span>
	        </li>            
	        <li onclick="xianshi(this,4)">
	        	<span class="iconfont icon-zaikubishudaibaoguanchaxun myspan"></span>
	        </li>
	        </ul>    
        </div>
    <!-- 引入js文件 -->    
    <script src="day1.js"></script></body>
</html>

2.css样式

/* 页面初始化 */
* {    
* margin: 0;    
* padding: 0;
* }
body {    
background-color: black;
}
#divBox {    
width: 100%;    
height: 350px;    
background-color: rgb(211, 95, 3);    
margin-top: 80px;    
position: relative;
}
.imgDiv {    
width: 650px;    
height: 250px;    
/* border: 1px solid red; */    
/*通过定位将div重叠 */    
position: absolute;    
left: 30%;    
/* 隐藏 */    
display: none;
}
img {    
width: 650px;}
ul {    
width: 600px;    
height: 50px;    
/* outline: rosybrown 1px solid; */    
position: absolute;    
margin-left: 30%;    
margin-top: 300px;
}
li {    
list-style: none;    
float: left;    
width: 118px;    
height: 40px;    
margin-top: 10px;    
background-color: sandybrown;    
margin-right: 2px;    
text-align: center;    
line-height: 50px;}
.myspan {    
font-size: 30px;    
color: rgb(211, 95, 3);}

3.js

// 1.获取放图片的div
// 2.给li标签绑定点击事件
let imgDiv = document.getElementsByClassName('imgDiv');
let myli = document.querySelectorAll('Ul > li');
let myLi1 = document.getElementById('myLi1')
console.log(imgDiv);
console.log(myli)    
// 定义一个函数 obj：被点击的li标签，num：下标
function xianshi(obj, num) {    
console.log(obj);    
console.log(num);    
imgDiv[num].style.display = 'block';    
obj.style.height = '45px';    
obj.style.marginTop = '5px';
    // 隐藏没有被点击的    
    for (let i = 0; i < imgDiv.length; i++) {        
    if (myli[i] !== obj) {            
    imgDiv[i].style.display = 'none';            
    myli[i].style.height = '40px';            
    myli[i].style.marginTop = '10px';
        }    
     }
  }
    xianshi(myLi1, 0);//初始状态