javascript实现tabs选项卡

最新推荐文章于 2024-03-04 00:09:38 发布

三生梅雨渡潇潇

最新推荐文章于 2024-03-04 00:09:38 发布

阅读量1.6k

点赞数 1

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

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

版权

博客同时被 2 个专栏收录

61 篇文章 1 订阅

订阅专栏

js题

19 篇文章 0 订阅

订阅专栏

一、题目：
用html、css、js实现一个简单的tabs选项卡，具体样式据图所示。

在这里插入图片描述

二、解题思路：
1.首先要根据要求将html框架做出来
2.用css给框架加上样式
3.当点击选项的时候，该选项的背景，高度，顶部距离会发生改变，当点击下一个选项，上一个选项的样式恢复原样
4.对于下面的内容，可以将所有的样式显示出来，通过定位将它们重叠在一起，之后将其隐藏
5.当点击选项后，相应的内容显示，当点击下一个选项，对应内容显示，上一个内容隐藏
三、代码显示：
1.html代码

<body>    
	<h1>Tabs 选项卡</h1>    
	<div id="div1">        
	<ul>            
		<li onclick="xianshi(this,0)">Long Tab Name</li>            
		<li onclick="xianshi(this,1)">Another Tab</li>            
		<li onclick="xianshi(this,2)">Tab 3</li>            
		<li onclick="xianshi(this,3)">Another Tab</li>           
		<li onclick="xianshi(this,4)">Another Tab</li>        
	 </ul>
	 <div id="cent" class="cent">            
	        <h3>Content 1</h3>            
	        <p>Aliquam eleifend magna mauris, id egestas eros dictum ac. Vivamus ac turpis at nisi mattis aliquam. In hac habitasse platea dictumst.
        	</p>        
        </div>        
        <div id="cent" class="cent">          
	        <h3>Content 2</h3>            
	        <p>Donec congue ligula non risus dictum, eget vehicula diam mattis. Pellentesque at ante ipsum. Suspendisse rutrum elementum dolor, non congue risus sagittis id.
	        </p>        
	</div>        
        <div id="cent" class="cent">          
          <h3>Content 3</h3>            
          <p>Vivamus sem odio, mattis vel dui aliquet, iaculis lacinia nibh. Vestibulum tincidunt, lacus vel semper pretium, nulla sapien blandit massa, et tempor turpis urna eu mi.
          </p>        
        </div>        
        <div id="cent" class="cent">         
             <h3>Content 4</h3>      
             <p>Aliquam eleifend magna mauris, id egestas eros dictum ac. Vivamus ac turpis at nisi mattis aliquam. In hac habitasse platea dictumst.
            </p>        
       </div>       
       <div id="cent" class="cent">           
            <h3>Content 5</h3>          
            <p>Aliquam eleifend magna mauris, id egestas eros dictum ac. Vivamus ac turpis at nisi mattis aliquam. In hac habitasse platea dictumst.
           </p>       
      </div>   
    </div>

    </body>

2.css样式

* {    
 margin: 0;    
 padding: 0;
 }
body {    
background-color: orange;
}
h1 {    
color: white;    
margin: 20px 0;    
text-align: center;
}
#div1 {   
 width: 100%;    
 height: 300px;   
  background-color: white;
  }
ul {    
width: 600px;    
height: 50px;    
/* outline: 1px solid red; */    
margin-left: 50px;    
position: relative;
}
li {    
float: left;    
list-style: none;   
 background-color: salmon;    
 display: block;    
 height: 30px;    
 line-height: 30px;   
 margin-top: 20px;   
 border-radius: 8px 8px 0 0;  
 margin-right: 5px;  
 cursor: pointer;
       }
#cent {    

width: 800px;    
height: 100px;    
border: slategray 1px solid;    
margin-left: 50px;    
position: absolute;    
display: none;
}

3.js代码

 //获得所有的Li标签
 let myli = document.querySelectorAll('li');
 console.log(myli);//获得所有的class为cent的div
 let cent = document.querySelectorAll('#cent');
 console.log(cent);
function xianshi(obj, num) {    
//当前被点击的li和对应的cent的样式改变    
cent[num].style.display = 'block';    
myli[num].style.backgroundColor = 'pink';    
myli[num].style.marginTop = '10px';    
myli[num].style.height = '40px';    
myli[num].style.lineHeight = '40px';
    //让上一次的东西消失    
    //遍历判断当前是否为点击的，不是则将class置为空    
    for (let i = 0; i < cent.length; i++) {        
    if (cent[i] !== obj) {            
    cent[i].className = '';        
    }        
    //判断点击的Li不是我当前i,则将下标为i的样式恢复        
    if (i !== num) {            
    cent[i].style.display = 'none';            
    myli[i].style.backgroundColor = 'salmon';            
    myli[i].style.marginTop = '20px';            
    myli[i].style.height = '30px';            
    myli[i].style.lineHeight = '30px'; 
    //为了让文字居中        
    }    
    }

}
xianshi(cent[0], 0);//默认第一个显示

三生梅雨渡潇潇

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript实现tabs选项卡

一、题目：用html、css、js实现一个简单的tabs选项卡，具体样式据图所示。二、解题思路：1.首先要根据要求将html框架做出来2.用css给框架加上样式3.当点击选项的时候，该选项的背景，高度，顶部距离会发生改变，当点击下一个选项，上一个选项的样式恢复原样4.对于下面的内容，可以将所有的样式显示出来，通过定位将它们重叠在一起，之后将其隐藏5.当点击选项后，相应的内容显示，当点击下一个选项，对应内容显示，上一个内容隐藏三、代码显示：1.html代码<body>
复制链接

扫一扫