Multiple HTML 'Anchors'?

[mmcdonald]

Boo! Yeah sorry it's me again...

I'm launching a modal with:

<a data-toggle="modal" data-target="#loginModal" href="javascript:;">Register</a>

The modal has 3 tabs. It should usually open on tab one (it does), but in this instance I would like it to automatically open on tab 2 when a particular link is followed... so here is the 'logic':

data-target="#loginModal#tab_2" 

Now the reason I say logic is because that obviously won't work. The real question here is - how does one make it work? To A) target a specific modal and in the same instance B) target a specific tab.

Many kudos!

Michael

[JorgeM]

The modal has 3 tabs. It should usually open on tab one (it does), but in this instance I would like it to automatically open on tab 2 when a particular link is followed.

How is the first tab chosen? In many cases, I've seen the implementation where you assign a specific class to the tab, say class="active". If this is the case for you, then you can just assign tab two with the appropriate class when the link is clicked.

[mmcdonald]

That's exactly the case mate, class="active". I'm obviously having a blonde moment because surely that restricts me to the use of JS? Is there no way HTML can handle this? Would you be as kind to show an example of how I could target a tab in a URL, even if it has to use JQuery (I SERIOUSLY need to sit down and study JS once and for all).

[JorgeM]

So jQuery would probably be the easiest approach...

Say you have multiple tabs, each tab with its unique ID: #tab-1, #tab-2, etc..

Now, on this anchor element (link), you assign a unique ID as well, #a1.

The jQuery could look something like this...

<script>
$("#a1").click(function(e) {
  e.preventDefault();
  $("#tab-2").addClass("active");
});
</script>

The e.prevenDefault is needed to prevent the link from autoposting back to the page. Your anchor link, something like this..

<a id="a1" href="#">Register</a>

This may or may not work for you exactly as written here because i dont know what else is going on in the page, but its simply to give you a starting point and sample on how to use jQuery to add a class on the fly.

[mmcdonald]

Progress!

Okay I like what you're doing here but it wasn't working... I tried this:

<script>
    $("#registerLink").click(function(e) {
      $("#tab_3_1").removeClass("active");
      $("#tab_3_2").addClass("active");
    });
</script>

<a data-toggle="modal" 
   data-target="#loginModal" 
   id="registerLink" 
   href="javascript:;">Register</a>

tab_3_1 is the tab in the modal that's usually open by default. When the link is clicked I want tab_3_2 to be active by default. Any more suggestions? I've also just started reading your JQuery guides @ itgeared.com -> thanks!

[mmcdonald]

Yeah it does work (facepalm) - It was the structure of my includes causing the issue. My final code:

<a data-toggle="modal" 
   data-target="#loginModal" 
   id="loginLink" 
   href="javascript:;">Login</a>

<a data-toggle="modal" 
   data-target="#loginModal" 
   id="registerLink" 
   href="javascript:;">Register</a>

<script type="text/javascript">

    $("#loginLink").click(function(e) {
      $("#tab_3_2").removeClass("active");
      $("#tab_3_1").addClass("active");
    });

    $("#registerLink").click(function(e) {
      $("#tab_3_1").removeClass("active");
      $("#tab_3_2").addClass("active");
    });

</script>   

Thank you Jorge!

[JorgeM]

awesome news...glad I was able to help you with that.