您好,欢迎来到舟合美食网。
搜索
您的当前位置:首页jqueryTab效果和动态加载的简单实例_jquery

jqueryTab效果和动态加载的简单实例_jquery

来源:舟合美食网


一:tab效果显示
代码如下:

无标题页





登录注册

  • 登录

  • 注册




  • 登录内容
    注册内容


    $(function() {
    $("#bd>div:not(:first)").hide(); //取id为bd下面第一个div,并且将不是第一个的隐藏起来
    $("#tab li").mouseover(function() { //当鼠标移动过id为tab 下面li标签时触发函数
    var index = $("#tab li").index(this);//取当前事件时的索引记录在index里面
    $(this).addClass("on").siblings().removeClass("on"); //将当前事件上加上样式“on”,并且将兄弟节点的样式全部移除
    //siblings()是取到兄弟节
    $("#bd>div").eq(index).show().siblings().hide(); //将id为bd下面的第 index个div显示出来,将兄弟隐藏(如:$("p:eq(1)")意思是”选择第二个

    元素“)
    });
    // $("#links a").mouseover(function() {
    // var index = $("#links a").index(this);
    // $("#tab li").eq(index).trigger("click");
    // });
    });




    二:Tab效果和动态加载
    代码如下:



    $(function() {
    $("#bd>div:not(:first)").hide();
    $("#tab td").mouseover(function() {
    var index = $("#tab td").index(this);
    $("#bd>div").eq(index).show().siblings().hide();
    });
    $("#bd a").click(function() {
    var link = $("百dddd");
    var links = $("sdfsdfsd");
    $("#tab").append(link); //向id为tab下面追加link
    $("#bd").append(links); //向id为bd下面追加links
    });
    });







    Copyright © 2019- zhouheie.com 版权所有

    违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

    本站由北京市万商天勤律师事务所王兴未律师提供法律服务