精华内容
下载资源
问答
  • js选项卡

    2020-08-18 09:17:48
    js选项卡: var headerBtn = document.querySelector(".header_center"); // ul var lists = headerBtn.children; //li for (let index = 0; index < lists.length; index++) { lists[index].onclick = ...

    js选项卡:

     var headerBtn = document.querySelector(".header_center"); //  ul
        var lists = headerBtn.children;   //li
        for (let index = 0; index < lists.length; index++) {
            lists[index].onclick = function () {
                for (let j = 0; j < lists.length; j++) {
                    lists[j].className = "";
                }
                lists[index].className = "active"  //点击哪个给哪个添加一个active类名(样式)
            }
        }
    
    展开全文
  • js 选项卡

    2018-09-14 10:06:00
    今天在这里分享一下js选项卡的实现方法: 思路: 1.通过js获取标题内容的元素节点  2.给标题元素添加下标属性  3.添加点击事件  4.点击标题时清空标题的css内容display:none;  5.从新给标题添加css内容...

    今天在这里分享一下js选项卡的实现方法:

    思路:  1.通过js获取标题内容的元素节点

         2.给标题元素添加下标属性

         3.添加点击事件

         4.点击标题时清空标题的css内容display:none;

         5.从新给标题添加css内容display:block;

    css代码 

    <style>
    .tab_box{width: 350px; height: 350px;}
    .tab_title{width: 100%; height: 50px;}
    .tab_title li{border:1px solid #000; width: 100px; height: 100%; list-style: none; float: left; font-size: 20px; line-height: 50px; text-align: center;}
    .content{display: none; width: 100%; height: 300px; text-align: center; line-height: 300px; font-size: 50px;}
    .color{background: blue; color: #fff !important;}
    </style>

    html代码

     

    <div class="tab_box">
      <ol class="tab_title" id="stt">
        <li class="color">红</li>
        <li>黄</li>
        <li>紫</li>
      </ol>
      <div class="content" style="display: block;" name="wyj">内容红</div>
      <div class="content" name = "wyj">内容黄</div>
      <div class="content" name = "wyj">内容紫</div>
    </div>

    js代码

    <script>
      var oT = document.getElementById('stt');//获取标题父元素节点
      var oTi = oT.getElementsByTagName('li');//通过标题父元素节点获取标题元素节点
      var oC = document.getElementsByName('wyj');//获取内容节点
      for(var i = 0; i<oTi.length; i++){
        oTi[i].index = i;//给标题设置个下标属性 非常重要必须设置
        oTi[i].onclick = function(){
        for(var i = 0; i<oTi.length; i++){
          oTi[i].className = '';//清空标题css
          oC[i].style.display = 'none';//把所有内容display:none;
          }
        this.className = 'color';//给点击的标题设置css
        oC[this.index].style.display = 'block';出现当前点击标题对应的内容   this.index重要
        }
      }
    </script>

    本来想写一个可运行的实例代码的但是没有js代码发表的权限比较难过

      

     

    转载于:https://www.cnblogs.com/stt520/p/9642210.html

    展开全文
  • js选项卡 js选项切换

    2017-12-30 18:16:53
    js选项卡 js选项切换js选项卡 js选项切换js选项卡 js选项切换
  • JS选项卡

    2018-09-19 22:56:24
    JS事件简易淘宝选项卡 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;...

    用JS事件简易淘宝选项卡

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>淘宝简易选项卡</title>
    		<style>
    			*{margin: 0px; padding: 0px;}
    			li{list-style: none;}
    			#main{
    				width: 500px;
    				height: 350px;
    				margin: 100px auto;
    				}
    			#main #menu li{
    				float: left;
    				width: 25%;
    				line-height: 35px;
    				border-right: 1px solid #808080;
    				box-sizing: border-box;
    				text-align: center;
    			}
    			#main #menu li.action{
    				border: 1px solid orangered;
    				border-bottom: none;
    			}
    			#main #menu li:hover{
    				cursor: pointer;
    			}
    			#main #conter{
    				width:500px;
    				height: 315px;
    				clear: both;
    				background-color: skyblue;
    				border-top: #808080;
    			}
    			#main #conter div{
    				display: none;
    				line-height: 315px;
    				text-align: center;
    			}
    			#main #conter .ac{
    				display: block;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<div id="main">
    			<ul id="menu">
    				<li class="action">充话费</li>
    				<li>旅行</li>
    				<li>车险</li>
    				<li>游戏</li>
    			</ul>
    			<div id="conter">
    				<div class="ac">话费99折</div>
    				<div>国内七日游</div>
    				<div>车险98折</div>
    				<div>一刀就满级</div>
    			</div>
    		</div>
    		<script>
    				//获取元素节点
    			var Ali=document.getElementById('menu').getElementsByTagName('li');
    			var ds=document.getElementById('conter').getElementsByTagName('div');
    			//保存索引号
    			var index=0;
    			for(var i=0;i<Ali.length;i++){
    				Ali[i]._index=i;//给对象添加一个属性  保存索引号用
    
    				//  li 点击事件
    				Ali[i].onclick=function(){				
    					Ali[index].className="";//清除之前的样式
    					ds[index].className="";//清除内容区域的样式
    					
    					this.className='action';//改变当前的样式
    					ds[this._index].className='ac';//改变当前的样式
    					
    					index=this._index;//当前的索引号    把索引号赋值给index
    				};
    			}
    		</script>
    	</body>
    </html>
    
    
    

    开始的时候选项卡默认有样式。默认class有值
    点击的时候,(去掉之前对象的class值 ,给当前对象的添加值)改变的当前的样式。 同时把之前的样式去掉。

    遍历的时候 把索引保存到 对象新建的属性中。 方便使用,避免闭包问题。
    重要的是保存索引,和获取当前的索引。

    展开全文
  • 原生js选项卡插件自定义图片滑动选项卡切换 原生js选项卡插件自定义图片滑动选项卡切换 原生js选项卡插件自定义图片滑动选项卡切换

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,601
精华内容 1,840
关键字:

js选项卡