精华内容
下载资源
问答
  • 原生js TAB切换

    2017-09-06 19:48:49
    Document *{ margin: 0; padding: 0; } img{ border:0; } ol, ul ,li{list-style: none;} .div-1{ width:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Document</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                border:0;
            }
            ol, ul ,li{list-style: none;}
            .div-1{
                width: 300px;
                height: 30px;
                background-color: red;
            }
            .div-2{
                width: 300px;
                height: 300px;
                background-color: pink;
                position: absolute;
                top:30px;
                left:0;
                display: none;
            }
            .div-11{
                width: 100px;
                height: 30px;
                background-color:yellow;
                float:left;
                cursor: pointer;
                text-align: center;
                line-height:30px;
            }
            .show{
                display:block;
            }
            .show-1{
                background-color: red;
            }
        </style>
    
    </head>
    <body>
        <div>
            <div class="div-1" id="div_1">
                <div class="div-11 show-1">dsada</div>
                <div class="div-11">dsadsa</div>
                <div class="div-11">dsadsa</div>
            </div>
            <div id="div_22">
              <div class="div-2 show">a</div>
              <div class="div-2">s</div>
              <div class="div-2">b</div>
            </div>
    
        </div>
    </body>
    </html>
     <script type="text/javascript">
             var div_1=document.getElementById('div_1');
             var div_1Child=div_1.children;
             var div_22=document.getElementById('div_22');
             var div_22Child=div_22.children;
             
             for(var i=0;i<div_1Child.length;i++){
                    div_1Child[i].index=i;  
                    div_1Child[i].οnclick=function(){
                      for(var j=0;j<div_1Child.length;j++){
                            div_1Child[j].className="div-11";
                          
                            div_22Child[j].className="div-2";
                             
                      }
                    
                       div_1Child[this.index].className="div-11 show-1";
                       div_22Child[this.index].className="div-2 show";
                    }
             }
        </script>
    展开全文
  • <div class="fishqc-tap"> <div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']"> <a href="javascript:;" onClick="javascrip...
          <div class="fishqc-tap">
                <div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
                    <a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'safety' && 'active'" ms-click="sortclick(@setting.safety)">安全榜单</a>
                </div>
                <div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
                    <a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'recommend' && 'active'" ms-click="sortclick(@setting.recommend)">优品推荐</a>
                </div>
                <!-- <a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'report' && 'active'" ms-click="sortclick(@setting.report)">即将上线</a> -->
                <div ms-visible="@codePic!=''&&@codeInfo!=''" class="tapHome">
                    <a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'secret' && 'active'" ms-click="sortclick(@setting.secret)">中选秘籍</a>
                </div>
                <!-- <a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'beforetry' && 'active'" ms-click="sortclick(@setting.beforetry)">试用报告</a> -->
                <div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']">
                    <a href="javascript:;" onClick="javascript:;" ms-class="@currentSelect.key == 'report' && 'active'" ms-click="sortclick(@setting.report)">试用报告</a>
                </div>
            </div>
            <div ms-if="@currentSelect.key == 'safety'">
              11111 
            </div>
    
           <!--  </div> -->
            <div ms-if="@currentSelect.key == 'recommend'"> 
              222222
            </div>
            <div class="award_bottom" ms-if="@currentSelect.key == 'secret'">
               3333
            </div>
            <div ms-if="@currentSelect.key == 'report'" style="margin-top: 0.2rem;border-bottom: 1px solid #f8f8f8">
             44444
           </div>
           setting: {
                safety: {
                    key: "safety"
                },
                recommend: {
                    key: "recommend"
                },
                secret: {
                    key: "secret"
                },
                report: {
                    key: "report"
                }
            },
             currentSelect:{},
    
    
     sortclick: function(item) {
                vm.currentSelect = item
                if (item.key == 'safety') {
                    vm.safetyList()
                } else if (item.key == 'recommend') {
                    vm.productRecommend()
                } else if (item.key == 'report') {
                    vm.tryReport()
                }
                console.log(55555, item)
            },
      vm.$watch('onReady', function() {
                vmi.currentSelect = vmi.setting.currenttry;
    
        })

     

    转载于:https://www.cnblogs.com/antyhouse/p/8984266.html

    展开全文
  • 如果你的页面只有一个tab切换的地方需要调用js效果 单独为了它你还要为页面加载一个jQuery插件,想必是极痛苦的 所有很多时候,jQuery特效也不是万能的,偶尔来个原生js效果也是必须的 今天无聊,...
  • 原生js实现tab切换 与 jq实现tab切换 原生js实现 **css部分** <style> *{ margin: 0; padding: 0; } .warp{ width: 100%; background-color: cyan; display: flex; } .top{

    原生js实现tab切换 与 jq实现tab切换

    原生js实现

    **css部分** 
    <style>
            *{
                margin: 0;
                padding: 0;
            }
            .warp{
                width: 100%;
                background-color: cyan;
                display: flex;
            }
            .top{
                width: 80vh;
                height: 50px;
                margin-left: 350px;
                display: flex;
            }
            .top div{   
                background-color: cadetblue;
                width: 100vh;
                height:50px;
                line-height: 50px;
                text-align: center;
                border-right: solid black 1px;
                flex-direction: row;
            }
            h1{
                text-align: center;
            }
            .top .active{
                display: block;
                background-color: yellowgreen;
                color: white;
            }
            .bottom{
                flex: 1;
                /* background-color: palegoldenrod; */
    
            }
            .bottom>div{
                display: none;
                text-align: center;
            }
            .bottom .show{
                display: block;
            }
            table{
                width: 100vh;
                border-collapse: collapse;
                cursor: pointer;
                margin: 0 auto;
            }
            table td{
                text-align: center;
            }
        </style>
        <div class="wrap">
            <h1>垃圾分类</h1>
           <div class="top">
                   <div  class="active">生活垃圾分类</div>
                   <div>可回收物</div>
                   <div>厨余垃圾</div>
                   <div>其他垃圾</div>
                   <div>有害垃圾</div>
            </div> 
           <div class="bottom">
                        <div class="show">
                            <h2>欢迎来到生活垃圾分类首页</h2>
                        <label>垃圾名称:</label>
                        <input type="text" name="" id="user"/>
                        <br>
                            <div class="add">
                                <button id="add1">添加到可回收物</button>
                                <button id="add2">添加到厨余垃圾</button>
                                <button id="add3">添加到其他垃圾</button>
                                <button id="add4">添加到有害垃圾</button>
                            </div>
                        </div>
         </div>
    
    js部分
     var divs=document.querySelectorAll(".top>div")
            var divs1=document.querySelectorAll(".bottom>div")
            console.log(divs,divs1);
            for( var i=0; i<divs.length; i++){
                divs[i].index = i;
                divs[i].onclick =function(){
                    for(var j=0; j<divs1.length; j++){
                        divs[j].className = "";
                        divs1[j].className ="";
                    }
                    this.className = "active";
                    divs1[this.index].className = "show";
                }
            }
    

    jq实现

    css部分
     <style>
            *{
                margin: 0;
                padding: 0;
            }
            .warp{
               width: 100%;
            }
            ul li{
                list-style: none;
            }
            .top{
                width: 300px;
                height: 30px;
                display: flex;
            }
            .top li{
                flex-direction: row;
                width: 200px;
                height: 30px;
                line-height: 30px;
                border: solid 1px  black;
                text-align: center;
            }
            .top .active{
                background-color: paleturquoise;
                color: white;
            }
            .buttom>div{
                width: 300px;
                height: 200px;
                border: solid 1px  black;
                display: none;
            }
            .buttom .show{
                display: block;
            }
        </style>
    
    jq部分
     <script>
             $(".top>li").on("click",function(){
                 var index= $(this).index();
                 $(this).addClass("active").siblings().removeClass("active");
                 $(".buttom>div").eq(index).addClass("show").siblings().removeClass("show");
             })
     </script>
    

    总而言之jq的写法相对原生js来说简化了好多! 仅供参考!

    展开全文
  • 原生js oop思维手撸tab选项卡 采用es3 +闭包+ OOP的思想封装tab选项卡切换; 效果图 1.目录结构 | -- my-tab | -- inedx.html #视图 | -- js #逻辑代码 | -- my-tab.js #核心代码模块 | -- tpl.js #...
  • 原生js实现tab切换

    2021-03-25 22:41:09
    原生js实现tab切换 1.添加自定义属性,让自己知道点击的时候知道是点击的哪个 2,排他思想,先把其它所有样式去掉,再把自己所需要的样式加上 html代码 <div class="main"> <ul> <li class=...

    原生js实现tab切换
    1.添加自定义属性,让自己知道点击的时候知道是点击的哪个
    2,排他思想,先把其它所有样式去掉,再把自己所需要的样式加上
    html代码

      <div class="main">
        <ul>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
        </ul>
        <div class="content">
          <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ol>
        </div>
      </div>
    

    css样式

    ul,ol,li,div{
          padding:0;
          margin:0;
        }
        .main{
          width:600px;
          height: 400px;
          background: #f5f5f5;;
        }
        ul{
          height:50px;
          border-bottom:1px solid #000;
        }
        ul li{
          float: left;
          list-style: none;
          width:80px;
          height: 50px;
          background:orange;
        }
        .active{
          color:#fff;
        }
        .content{
          width:600px;
          height:350px;
          background:#ccc;
          overflow: hidden;
        }
        ol{
          width:100%;
          height:100%;
        }
        ol li{
          width:100%;
          height: 100%;
          float: left;
          background: green;
        }
    

    js代码

       window.onload=function(){
          let ul=document.getElementsByTagName("ul")[0];
          let uls=ul.getElementsByTagName("li");
          let ol=document.getElementsByTagName("ol")[0];
          let ols=ol.getElementsByTagName("li")
          console.log("uls",uls)
          for(let i=0;i<uls.length;i++){
          	//为每个li添加一个自定义属性
            uls[i].index=i;
            uls[i].onclick=function(){
            // 打印看下自己添加的自定义属性
              console.log(uls[i].index)
              // 去所有li的样式
              for(let j=0;j<uls.length;j++){
                uls[j].className="";
                ols[j].style.display="none"
              }
              // 再把当前点击的li所需要的样式加上,this很重要
              uls[this.index].className="active";
              ols[this.index].style.display="block"
            }
          }
        }
    
    展开全文
  • 原生JSTab切换

    2018-08-26 17:45:54
    ## 原生JS实现Tab切换 ## 本人是前端菜鸟一枚,喜欢钻研前端,前端的可视化界面带来的舒适,即可编写就可以看到效果界面,成就感满满! 废话不多说,开始撸代码! 这里写代码片 &amp;amp;lt;!...
  • 原生js tab代码选项卡里面按钮控制图片滚动选项卡切换
  • js 原生实现 tab 切换

    2020-09-26 21:53:24
    实现 这个 html: css: js:
  • 原生js实现Tab切换(排他)功能 在前端的面试中,一旦遇到笔试题,基本上都会有Tab切换,今天我们来说一下如何使用原生js实现Tab切换功能。如图: HTML代码: <div class="wrap"> <div class="box">1&...
  • 原生js实现的tab选项卡切换,代码结构清晰,保证让你一看就会,看完马上就变成自己的。另外,这个tab选项卡是有动态切换效果的哦。
  • 原生js tab选项卡新闻列表切换效果代码,我们也习惯于称为"滑动门",一般在网站里面,我们可以做一个选项卡的特效,在页面展示新闻信息等,非常适合在企业网站或者门户网站中使用。php中文网推荐下载!
  • 原生JS实现tab切换

    千次阅读 2018-08-28 23:18:53
    现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果。 &lt;!DOCTYPE html&gt; &lt;html lang="en"...tab切换&lt;/title&gt; &lt;style type="
  • JS原生Tab切换

    2019-11-29 19:35:16
    背景: 因为在最近的Asp.net项目中使用到前端中的Tab切换,因这两种方法...JS 原生的写法: 使用前端的Tab切换有两种方法能够实现: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...
  • 原生js 实现tab切换

    2019-09-13 04:30:10
    //tab切换盒子的动效 function fTabBox(tabBox) { //获取到tab标题的元素节点 var tabTitle = tabBox.getElementsByClassName("tabTitle")[0]; //获取的tab内容的元素节点 var tabCon = tabBox....
  • } </style> </head> <body> <div class="wrap"> <div class="control"> 选项一</div> 选项二</div> 选择三</div> </div> <div class="content"> <div class="tab show">选项一,你好号</div> <div class="tab">选项...
  • 原生JStab切换实现

    2020-04-18 23:05:46
    }) }) 解释一下JS代码的内容 首先获取所有ul的li: const btn = document.querySelectorAll(‘ul>li’); 获取所有ol的li: const tabs = document.querySelectorAll(‘ol>li’); 一开始变量我用的var但是学到...
  • 原生js 实现tab切换

    2019-09-13 04:30:14
    //tab切换盒子的动效 function fTabBox(tabBox) { //获取到tab标题的元素节点 var tabTitle = tabBox.getElementsByClassName("tabTitle")[0]; //获取的tab内容的元素节点 var tabCon = tabBox....
  • 主要为大家详细介绍了原生js+css实现tab切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 原生JS实现TAB切换

    千次阅读 2017-06-30 00:42:05
    之前上传了一个jquery实现tab切换的博客,这个是原生js实现tab切换的案例,不多说直接上代码!同样复制粘贴就能看到效果哦! <!DOCTYPE html> <title></title> .Box{ width: 2

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 273
精华内容 109
关键字:

原生jstab切换