js实现原生选项卡

最新推荐文章于 2021-09-06 15:56:51 发布
最新推荐文章于 2021-09-06 15:56:51 发布
阅读量97 收藏
点赞数
原文链接：http://www.cnblogs.com/web928943/p/9999891.html
版权
 
  



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>开关按钮设置</title>
	</head>
	<link rel="stylesheet" href="css/Default style sheet.css" />
	<style>
		div{
		width:120px;
		margin: 0px auto;
		border: 2px solid black;}
		ul{
			
			display: none;
		}
	</style>
	<script>
		window.οnlοad=function(){
			var odiv=document.getElementById("v");
			var oli=odiv.getElementsByTagName("ul")[0];
	     	var 	onf=true
				odiv.οnclick=function(){
					if (onf==true) {
						oli.style.display='block';
						onf=false
					} else{
						oli.style.display='none';
						onf=true
					}
				}
				
				
				
			
		}
	</script>
	<body>
		<div id="v">
			<h4>你好啊，小老弟</h2>
		<ul>
			<li>come</li>
			<li>on</li>
			<li>do</li>
		</ul>
		</div>
		
	</body>
</html>
 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/web928943/p/9999891.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30239339
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
组件tabs太难受？我手搓了原生选项卡

				
			

			

				

					weixin_71381751的博客
				

				

					09-05
					
					270
					
				

			

		

		

			
				
与其在别人的样式上改 不如自己写一个

			
		

	



                

              
                



	

		

			

				
					
原生js实现tab选项卡切换

				
			

			

				

					10-21
				

			

		

		

			
				
主要为大家详细介绍了原生js实现tab选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	



                


  
              

                


	

		

			

				
					
原生js制作选项卡详解，适合无基础的人学习

				
			

			

				

					纸飞机博客
				

				

					09-06
					
					2020
					
				

			

		

		

			
				
当我们学习js学习到一定程度的时候难免会有些枯燥，乏味，这个时候可能就需要写一点真正能动有用的东西来提升下兴趣了，在日常网页开发中,轮播图,导航栏,选项卡这三个是必不可少的，今天就给大家带来一个关于原生js制作选项卡的方法。

知识点:选择器，for循环，事件(event)，this的指向。

选项卡：点击第n个按钮切换到第n个选项栏，并且给该按钮和选项栏添加样式，清除其他部分的样式，上图：



1、选项卡HTML结构


<div class="tab">
		<ul class="b

			
		

	





	

		

			

				
					
原生js三种选项卡效果（点击）

				
			

			

				

					qq_15980201的博客
				

				

					12-23
					
					1274
					
				

			

		

		

			
				
第一种：选项卡单击点击切换


         
                   
                   选项卡-点击触发效果
                   
                            *{
                                     margin:0;
                 

			
		

	



		

			
		



	

		

			

				
					
js原生选项卡功能

				
			

			

				

					yangsm的博客
				

				

					08-07
					
					307
					
				

			

		

		

			
				
<style>
	.content{
		display: none;
		width:200px;
		height: 200px;
		border:1px solid #ccc;
	}
	.active{
		background-color: red;
	}
</style>

<div class="wrapper">
	<button class="active">111</button>
	<button>222<.

			
		

	





	

		

			

				
					
JavaScript原生代码编写选项卡Tab页跳转功能

				
			

			

				

					叶小桃的博客
				

				

					04-01
					
					3026
					
				

			

		

		

			
				
本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能

			
		

	





	

		

			

				
					
原生js实现选项卡功能

				
			

			

				

					11-28
				

			

		

		

			
				
本示例将详细解释如何使用原生JavaScript来实现一个简单的选项卡功能。  首先，让我们分析提供的HTML结构。在示例中，我们有一个`<div>`元素（id="div1"），包含三个输入按钮（`<input>`）作为选项卡的标签，以及三...

			
		

	





	

		

			

				
					
原生js实现下拉选项卡

				
			

			

				

					01-19
				

			

		

		

			
				
本文实例为大家分享了js实现下拉选项卡的具体代码，供大家参考，具体内容如下 效果如下：  代码如下：  <!DOCTYPE html> <html>  <head>  <meta charset=utf-8 />  <title>下拉选项卡&lt...

			
		

	





	

		

			

				
					
原生javascript实现Tab选项卡切换功能

				
			

			

				

					10-24
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用原生JavaScript实现Tab选项卡切换功能，这是一种常见的用户界面交互，用于在有限的空间内展示多个内容区域。虽然jQuery提供了许多便利的插件来实现这一功能，但为了减少页面加载...

			
		

	





	

		

			

				
					
原生js实现选项卡

				
			

			

				

					ruantianqing的博客
				

				

					01-18
					
					243
					
				

			

		

		

			
				
1 html
    <div id="app" class="app">
        <div class="header">
            <span class="choose">精选</span>
            <span>社会</span>
            <span>娱乐</span>
            <span>体育</span>
  

			
		

	





	

		

			

				
					
一个封装了的选项卡效果js

				
			

			

				

					02-06
				

			

		

		

			
				
一个封装了的选项卡效果js,一个封装了的选项卡效果js

			
		

	





	

		

			

				
					
原生js写一个选项卡

				
			

			

				

					wan845199324的博客
				

				

					06-29
					
					1543
					
				

			

		

		

			
				
html代码：   <h2 class="active">选项卡1</h2>                   
   <h2>选项卡2</h2>
   <h2>选项卡3</h2>
   <div style="display:block;background-color:hotpink;">内容1</div>     
   <div style="background-color:darkkh

			
		

	





	

		

			

				
					
实践题 - 选项卡

				
			

			

				

					weixin_30302609的博客
				

				

					06-24
					
					172
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实践题 - 选项卡</title>
    <style type="text/css">
        *{padding:0px;marg...

			
		

	





	

		

			

				
					
原生js,实现单选框

				
			

			

				

					baodaotui4761的博客
				

				

					08-15
					
					1790
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta h...

			
		

	





	

		

			

				
					
使用js实现二级菜单栏切换

				
			

			

				

					chili_fan的博客
				

				

					06-23
					
					5878
					
				

			

		

		

			
				
js实现二级菜单栏切换
一、一级菜单栏和二级菜单在同一个盒子内。

当鼠标经过水果盒子时，让下面的内容显示。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document&lt

			
		

	





	

		

			

				
					
使用javascript实现二级联动菜单

					
热门推荐

				
			

			

				

					u011526599的专栏
				

				

					05-07
					
					1万+
					
				

			

		

		

			
				
关于使用javascript实现二级联动菜单的探讨

			
		

	





	

		

			

				
					
tab选项卡代码（原生js）

				
			

			

				

					weixin_30644369的博客
				

				

					09-28
					
					177
					
				

			

		

		

			
				
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>tab选项卡一练习</title>    <style>        *{            margin: 0px;            padding: 0...

			
		

	





	

		

			

				
					
js滚动事件

				
			

			

				

					weixin_33905756的博客
				

				

					03-18
					
					1154
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
         ...

			
		

	





	

		

			

				
					
实现JavaScript 原生选项卡

					
最新发布

				
			

			

				

					06-13
				

			

		

		

			
				
好的，下面是一个简单的JavaScript原生选项卡实现：

HTML部分：

```html
<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button>

  <div id="tab1" class="tabcontent">
    <h3>Tab 1 Content</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

  <div id="tab2" class="tabcontent">
    <h3>Tab 2 Content</h3>
    <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>

  <div id="tab3" class="tabcontent">
    <h3>Tab 3 Content</h3>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
  </div>
</div>
```

CSS部分：

```css
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
```

JavaScript部分：

```javascript
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
```

解释：

通过 HTML 中的按钮元素和对应的内容区域，通过 JavaScript 的事件监听实现点击按钮显示对应的内容区域的功能。其中，openTab 函数接收两个参数，分别是事件对象 evt 和对应的选项卡名称 tabName。在函数内部，通过循环遍历所有内容区域和按钮元素，将它们的样式 display 设为 none，将所有按钮元素的类名中的 active 替换为空格。然后再将对应的内容区域样式 display 设为 block，将对应的按钮元素的类名中加上 active 样式，以示当前选中状态。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值