javascript实现tabs选项卡

标签: 博客  js题  javascript  css  html  html5  css3

一、题目:
用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;
}
版权声明:本文为qq_43435403原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43435403/article/details/108161176