Create link to specific jQuery tab

Question

I've looked around and tried several things from similar post about jQuery tabs, but I can't get my code to work the same. Below is what I'm working with. Goal is to have the link open the correct tab.

Link to the tab:

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

The code for my tabs:

<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>

My main.js to call the tab: this is called when the page initially loads, which selects the first h3

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

The selectorr function:

/* 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);

Swati · Accepted Answer · 2021-03-07 12:23:32Z

1

Your plugin replace previous html and add new htmls i.e : <li class="title">..</li> so .about doesn't exist in your dom . Instead you can use '$(".titles li:eq(1)").trigger("click")' to trigger second li i.e : about tab .

Demo Code :

/* 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>

answered Mar 7, 2021 at 12:23

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

KraigBalla Over a year ago

Thank you so much!!! This is my home.php file. So if I were on a different page but wanted to link to the home.php "about us" section how would I go about passing that information? Is it something that can be passed in the URL..? I'm using CodeIgniter framework so maybe it can be passed through the controller or URI segment?

Swati Over a year ago

Hi, if you know li which you need to display you can pass index no of li like if want to open first li pass 0 for second pass 1 and so on . Then you just need to use that value here $(".titles li:eq("+valuewhichpass+")")

KraigBalla Over a year ago

So then I'd use an if else statement to determine if I'm on the home.php page, if not then redirect to the home.php with the URI segment "valuewhichpass". Then in the Home Controller I can check to see if a URI segment exists...if it does then pass the value to the Li, if not pass the value 0.

Swati Over a year ago

yes something like that see if that works or not

Collectives™ on Stack Overflow

Create link to specific jQuery tab

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related