精华内容
下载资源
问答
  • js tab切换

    2018-07-21 10:30:12
    //点击tab切换 li var messageUi = $(".js-messages"); //内容显示tab ul for(var i=0; i<messageLi.length;i++){ messageLi[i].index = i; messageLi[i].onclick = funct...
    var messageLi = $(".pw-message-tit li"); //点击tab切换 li
    var messageUi = $(".js-messages");	//内容显示tab ul
    
    
    for(var i=0; i<messageLi.length;i++){
    	messageLi[i].index = i;
    	messageLi[i].onclick = function(){
    	    for(var i=0;i<messageLi.length;i++){
    	        messageLi[i].className="";    //删除未选中tab类名
    	        messageUi[i].style.display="none";
    	    }
    	    this.className="message-atv";   //添加一个选中类名
    	    messageUi[this.index].style.display="block";
    	}
    }
    <div>
        <ul class="pw-message-tit">
            <li></li>
            <li></li>
        </ul>
    </div>
    
    <div>
        <ul class="js-messages">
            <li></li>
        </ul>
         <ul class="js-messages">
            <li></li>
        </ul>
    </div>

     

    展开全文
  • js tab 切换

    2012-03-19 09:38:00
    <script type="text/javascript"> function g(o){return document.getElementById(o);} function HoverLi(n,m,q,p){ for(var i=1;i<=m;i++) { g(q+i).className='normaltab'...g(p+i).className='hide...
    <script type="text/javascript">
    function g(o){return document.getElementById(o);}
    function HoverLi(n,m,q,p){
    for(var i=1;i<=m;i++)
    {
    g(q+i).className='normaltab';
    g(p+i).className='hide';
    }
    g(p+n).className='nohide';
    g(q+n).className='hot';
    }
    </script>
     
    <div class="tabs_header">
    <ul class="tabs">
    <li id="tb_1" class="hot" οnclick="HoverLi(1,4,'tb_','in_')"><a href="#"><span>水生活</span></a></li>
    <li id="tb_2" οnclick="HoverLi(2,4,'tb_','in_')"><a href="#"><span>烤面包文化</span></a></li>
    <li id="tb_3" οnclick="HoverLi(3,4,'tb_','in_')"><a href="#"><span>蒸美味</span></a></li>
    <li id="tb_4" οnclick="HoverLi(4,4,'tb_','in_')"><a href="#"><span>妈妈宝</span></a></li>
    </ul>
    </div>
    <div class="in">
    <div class="nohide" id="in_1">
    内容1
    </div>
    <div class="hide" id="in_2">
    内容2
    </div>
    <div class="hide" id="in_3">
    内容3
    </div>
    <div class="hide" id="in_4">
    内容4
    </div>
    </div>

    转载于:https://www.cnblogs.com/ybbqg/archive/2012/03/19/2405548.html

    展开全文
  • 咸鱼前端—js tab切换案例 tab切换案例:点击标签显示对应内容 效果图 代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <...

    咸鱼前端—js tab切换案例

    tab切换案例:点击标签显示对应内容

    效果图

    在这里插入图片描述
    在这里插入图片描述
    代码

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            ul {
                list-style-type: none;
            }
    
            #box {
                width: 375px;
                height: 300px;
                margin: 100px auto;
                overflow: hidden;
            }
    
            .hd {
                height: 40px;
            }
    
            .hd span {
                display: inline-block;
                width: 90px;
                background-color: #026392;
                line-height: 40px;
                text-align: center;
                cursor: pointer;
            }
    
            .hd span.current {
                background-color: #C6DAF2;
                color: #3E4A5B;
            }
    
            .bd li {
                height: 255px;
                background-color: #C6DAF2;
                display: none;
            }
    
            .bd li.current {
                display: block;
            }
        </style>
    </head>
    <body>
    <div id="box">
        <div class="hd">
            <span class="current">标签1</span>
            <span>标签2</span>
            <span>标签3</span>
            <span>标签4</span>
        </div>
        <div class="bd">
            <ul>
                <li class="current">我是标签1的内容</li>
                <li>我是标签2的内容</li>
                <li>我是标签3的内容</li>
                <li>我是标签4的内容</li>
            </ul>
        </div>
    </div>
    <script>
        var my$ = function (id) {
            return document.getElementById(id);
        }
        var box = my$("box");
        //获取span 和 li标签
        var hd = my$("box").getElementsByTagName("span");
        var bd = my$("box").getElementsByTagName("li");
        //循环添加上事件
        for (var i = 0; i < hd.length; i++) {
            //添加自定义属性,保存索引
            hd[i].setAttribute("int", i);
            hd[i].onclick = function () {
    
                for (var j = 0; j < hd.length; j++) {
                    //移除所有属性
                    hd[j].removeAttribute("class")
                }
    
                //被点击的添加属性
                this.className = "current";
                //span被点击时 获取索引值
                var bdlist = this.getAttribute("int");
                for (var s = 0; s < bd.length; s++) {
                    bd[s].removeAttribute("class");
                }
    
                //当前被点击的span对应的li显示
                bd[bdlist].className = "current";
            };
    
        }
    </script>
    </body>
    </html>
    
    展开全文
  • js tab切换源码下载

    2017-10-24 15:40:28
    简单JavaScript Tab切换源码下载。兼容IE8以及各种主流浏览器
  • <h2>h2> div> div> div> JS tab切换 // 触发点击事件,获取ul和div的元素节点 var ul=document.getElementById("ul").children; var tab=document.getElementById("div").children; // 准备触发点击事件,因为ul与...

    CSS样式

    flex布局

    <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #box{
                display: flex;
                width: 100vw;
                height: 100vh;
            }
            .left{
                width: 200px;
            }
            #ul>li{
                margin-top: 5px;
                background: khaki;
                text-align: center;
                line-height: 70px;
                font-size: 18px;
                color: rebeccapurple;
            }
            #ul>.active{
                background: salmon;
            }
            .right{
                flex: 1;
            }
            #div>h2{
                display: none;
            }
            #div>.show{
                display: block;
            }
        </style>
    

    HTML布局

     <div id="box">
            <div class="left">
                <ul id="ul">
                    <li class="active">😀</li>
                    <li>😀</li>
                    <li>😀</li>
                    <li>😀</li>
                </ul>
            </div>
            <div class="right">
                <div id="div">
                    <h2 class="show">🐖</h2>
                    <h2>🐖🐖</h2>
                    <h2>🐖🐖🐖</h2>
                    <h2>🐖🐖🐖🐖</h2>
                </div>
            </div>
        </div>
    

    JS tab切换

    // 触发点击事件,获取ul和div的元素节点
    	var ul=document.getElementById("ul").children;
        var tab=document.getElementById("div").children;
    // 准备触发点击事件,因为ul与div每一项对应,需要循环
    // 首先给ul下的li每一项一个onclick
    // 题目需求。需要点击到的事件高亮显示,其他无高亮
    // 要有默认的高亮项,所以需要一个内部再次循环,先清除所有高亮
    // 清除高亮,因为需要点击高亮显示,在默认一个高亮项即可
        for( let i=0;i<ul.length;i++){
            ul[i].onclick=function(){
                for( var j=0;j<ul.length;j++ ){
                    ul[j].classList.remove("active");
                    tab[j].classList.remove("show")
                }
                ul[i].classList.add("active");
                tab[i].classList.add("show")
            }
        }
    

    jq tab切换

    (记得载入jquery文件)

    <script src="./jquery-3.5.1.js"></script>
    <script>
    		// index() 获取下标
            // siblings() 所有同辈元素
            // eq(index)  获取指定下标的元素
            $("#ul>li").on("click",function (){
                var index=$(this).index()
                // 当前点击dom 添加 class --active  其他的兄弟元素 移除  class --active
                $(this).addClass("active").siblings().removeClass("active")
                $("div>h2").eq(index).addClass("show").siblings().removeClass("show")
            })
        </script>
    

    小姐姐帮到你了,就记得点赞评论昂~😀

    展开全文
  • 简单jsTab切换

    2020-03-18 15:11:20
    // 顶部tab切换 function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); ...
  • js Tab切换实例

    2017-08-04 09:53:00
    js 实现 tab 切换 实现如下效果: 1、图片每1秒钟切换1次。 2、当鼠标停留在整个页面上时,图片不进行轮播。 3、当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化。 ...
  • JS TAB切换 多个效果的源码

    热门讨论 2013-03-18 09:51:04
    5个tab切换效果的源码: 360度旋转tab标签切换内容 js实现Tab标签切换源码 JS实现竖向滑动菜单 多种不同方向风格的tab标签切换效果 竖向tab标签滑动门选项卡
  • Js tab切换

    2020-01-03 09:33:55
    想请问下,我想把这个网页刷新出来...js应该怎么改[img=https://img-bbs.csdn.net/upload/202001/03/1578015233_800793.jpg][/img][img=https://img-bbs.csdn.net/upload/202001/03/1578015234_209467.jpg][/img][img=...
  • 原生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:
  • JS tab切换事件

    2016-03-16 16:16:00
    $('ul.main-tab>li').on('mousedown', data, function() { var $this = $(this), $box = $('.main-tab-content'), i = $this.index(); if ($this.hasClass('on')) { return false; } switch (i)...
  • tab < / title > < style > * { padding: 0 ; margin: 0 ; } . div { position: absolute ; width: 800 px ; left: 100 px ; margin-top: 100 px ; background: ...
  • js tab切换

    2013-07-29 16:36:18
    avascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器] javascript tab 选项卡[兼容ie6,ie7,ie8,fox浏览器] function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var
  • JS tab切换(jq)

    2018-08-10 13:22:21
    给选项卡tab添加样式类  var ids=$(this).index();//序列  $(this).eq(ids).addClass('select').sibilings().removeClass('select);//选择哪个选项卡就让哪个对应的div添加显示样式类 });
  • var tabs = function (tab, con,con2) {//debugger tab.eq(0).addClass('sevenFenlei_topMenu_zi_active') con.hide(); con.eq(0).show(); con2.hide(); con2.eq(0).show(); tab.click(func...
  • <div class="fishqc-tap"> <div ms-class="[@codePic!=''&&@codeInfo!=''?'tapHome':'changeToThree']"> <a href="javascript:;" onClick="javascrip...
  • js tab切换效果

    千次阅读 2010-10-11 16:36:00
    <html><br /><head><br /> <title>tab</title><br /> <style type="text/css"><br /> body  {  margin-top: 0px;  margin-left: 0px;  margin-bottom: 0px;  margin-right:
  • JS Tab切换 选项卡 五种方法

    千次阅读 2016-07-05 11:08:18
    <spanid="tab0"class="tab"onmouseover="changeTab()">1 <spanid="tab1"onmouseover="changeTab1()">2 <spanid="tab2"onmouseover="changeTab2()">3 <div id="c0"class="ct">...
  • 简单好用的js tab切换特效;很容易看懂和自己修改
  • jstab选项卡切换

    2019-08-10 08:07:00
    js tab选项卡切换
  • 原生js实现tab切换 与 jq实现tab切换 原生js实现 **css部分** <style> *{ margin: 0; padding: 0; } .warp{ width: 100%; background-color: cyan; display: flex; } .top{

空空如也

空空如也

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

jstab切换