时间戳

首页 > 解决方案 > 创建指向特定 jQuery 选项卡的链接

html - 创建指向特定 jQuery 选项卡的链接

问题描述

我环顾四周并尝试了关于 jQuery 选项卡的类似帖子中的几件事，但我无法让我的代码正常工作。下面是我正在使用的。目标是让链接打开正确的选项卡。

链接到选项卡：

 <li><a onClick="$('.tabs').selectorr('.about', 250).click()" href="#">About Us</a></li>

我的标签的代码：

<ul class="tabs">
            <li>
                <h3>Games</h3>
                <div class="split">
                        <p>Current Games</p>
                        <div>Tab 1 content</div>                        
                </div>
            </li>
            <li>
                <h3 class="about">Who We Are</h3>
                <div class="split reversed">
                        <div>Tab 2 content</div>
                </div>
            </li>
</ul>

我的 main.js 调用选项卡：这是在页面最初加载时调用的，它选择第一个 h3

    $('.tabs').selectorr({
        titleSelector: 'h3',
        delay: 250
    });

选择器功能：

/* jquery.selectorr v0.2 | (c) @ajlkn | MIT licensed */
!function(e){
    e.fn.selectorr=function(t){
        var i=e(this),s=e.extend({
            titleSelector:".title",delay:0
        },t);
        if(0==this.length)
            return i;
        if(this.length>1){
            for(var a=0;a<this.length;a++)e.selectorr(e(this[a]),s);
            return i
        }
        return e.selectorr(i,s)
    },e.selectorr=function(t,i){
        var s,a,l,n=t.children("li"),r=e('<div><ul class="titles"></ul><div class="panels"></div></div>').insertAfter(t),c=r.find(".titles"),d=r.find(".panels"),o=0,v=!1;(l=n.filter(".active")).length>0&&(o=l.index()),n.each(function(t){
            var l,n,r,f,u=e(this);
            r=u.find(i.titleSelector),f=r.attr("href"),l=e('<li class="title">'+r.html()+"</li>"),c.append(l),r.remove(),l.css("cursor","pointer"),u.wrapInner('<div class="panel" />'),n=u.children("div"),n.appendTo(d),l.on("click",function(e){
                if(v||l.hasClass("active"))return!1;
                if(f)return location.href=f,!1;v=!0,s.removeClass("active"),l.addClass("active");
                var t=a.filter(".active");
                return t.length>0?(t.removeClass("active"),setTimeout(function(){
                    t.css("display","none"),n.show(),n.addClass("active"),setTimeout(function(){
                        v=!1},i.delay)
                },i.delay)):(n.css("display",""),n.addClass("active"),setTimeout(function(){
                    v=!1
                },i.delay)),!1
            }),t==o?(l.addClass("active"),n.addClass("active")):n.css("display","none")
        }),r.attr("id",t.attr("id")).attr("class",t.attr("class")),t.remove(),s=c.find(".title"),a=d.find(".panel")
    }
}(jQuery);

标签： htmljqueryhyperlinktabs

解决方案

您的插件替换以前的 html 并添加新的 html 即：<li class="title">..</li>所以.about在您的dom. 相反，您可以使用'$(".titles li:eq(1)").trigger("click")'触发第二个li即：关于选项卡。

演示代码：

/* jquery.selectorr v0.2 | (c) @ajlkn | MIT licensed */ ! function(e) {
  e.fn.selectorr = function(t) {
    var i = e(this),
      s = e.extend({
        titleSelector: ".title",
        delay: 0
      }, t);
    if (0 == this.length)
      return i;
    if (this.length > 1) {
      for (var a = 0; a < this.length; a++) e.selectorr(e(this[a]), s);
      return i
    }
    return e.selectorr(i, s)
  }, e.selectorr = function(t, i) {
    var s, a, l, n = t.children("li"),
      r = e('<div><ul class="titles"></ul><div class="panels"></div></div>').insertAfter(t),
      c = r.find(".titles"),
      d = r.find(".panels"),
      o = 0,
      v = !1;
    (l = n.filter(".active")).length > 0 && (o = l.index()), n.each(function(t) {
      var l, n, r, f, u = e(this);
      r = u.find(i.titleSelector), f = r.attr("href"), l = e('<li class="title">' + r.html() + "</li>"), c.append(l), r.remove(), l.css("cursor", "pointer"), u.wrapInner('<div class="panel" />'), n = u.children("div"), n.appendTo(d), l.on("click", function(e) {
        if (v || l.hasClass("active")) return !1;
        if (f) return location.href = f, !1;
        v = !0, s.removeClass("active"), l.addClass("active");
        var t = a.filter(".active");
        return t.length > 0 ? (t.removeClass("active"), setTimeout(function() {
          t.css("display", "none"), n.show(), n.addClass("active"), setTimeout(function() {
            v = !1
          }, i.delay)
        }, i.delay)) : (n.css("display", ""), n.addClass("active"), setTimeout(function() {
          v = !1
        }, i.delay)), !1
      }), t == o ? (l.addClass("active"), n.addClass("active")) : n.css("display", "none")
    }), r.attr("id", t.attr("id")).attr("class", t.attr("class")), t.remove(), s = c.find(".title"), a = d.find(".panel")
  }
}(jQuery);


$('.tabs').selectorr({
  titleSelector: 'h3',
  delay: 250
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="tabs">
  <li>
    <h3>Games</h3>
    <div class="split">
      <p>Current Games</p>
      <div>Tab 1 content</div>
    </div>
  </li>
  <li>
    <h3 class="about">Who We Are</h3>
    <div class="split reversed">
      <div>Tab 2 content</div>
    </div>
  </li>
</ul>
<!--click on second li-->
<a onclick='$(".titles li:eq(1)").trigger("click")' href="#">About Us</a>

推荐阅读