CODEWITHSUNDEEP
javascriptjqueryhtmlcsstabs
gg93
gg93

Reputation: 87

Open tab using anchor tag link?

So I've got two tabs on a page, with anchor tags- I navigate to them from the homepage using the anchor on a header menu item.

I've gotten the actual tabs to work, using an active class and aria-expanded="true", but I can't get the appropriate tab to be active from the header.

i.e.: 1. Header menu->click on #tab2 link 2. Load page-> scroll to anchor tag-> tab2 is open (this is the part I have a problem with, tab 1 stays open unless I actually click on the tab2 button)

I've tried to change the active class involved, but I'm fairly new to javascript/jquery so I'm not sure I can actually do it; additionally, this is in worpress and the header menu doesn't have the field for an id of its own elements.

===============================

EDIT, CLARIFICATION: I have the tabs working, and I can go to them on the page from the header link, I just need the right tab to be open depending on the link I click from the header

I've also tried initiating a .click(#tab2) but the script won't run properly.

if(window.location.href.indexOf("tab2") > -1) {
       document.getElementById('tab2').click();
    }

Edit: Header HTML fot link:

<ul class="uk-nav uk-nav-navbar">
        <li class="uk-active">
            <a title="" href="testsite.com/#tab1" >tab 1</a></li>
        <li class="uk-active"><a title="" href="testsite.com/#tab2" 
            class="">tab2</a>
        </li>
    </ul>

Tab HTML

    <li class="uk-width-medium-1-4 active" id="tab1" aria-expanded="false">
        <a class="uk-button tab1">tab1</a>
    </li>
    <li class="uk-width-medium-1-4 " id="tab2" aria-expanded="false">
        <a class="uk-button tab2">tab2</a>
    </li>

Javascript:

var ai = document.getElementById(""); [I'm having trouble with this, cause I can't see a way to attach an id to a wordpress menu item]

var ch = document.getElementById("");

ai.onclick = function(){
    document.getElementById('tab1').click();
}

ch.onclick = function(){
    document.getElementById('tab2').click();
}

Upvotes: 1

Views: 9226

Answers (1)

Prasad Wargad
Prasad Wargad

Reputation: 765

You can try it using jQuery too. Adding sample code snippet below, please have a look. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    var anchorHash = window.location.href.toString();
    if( anchorHash.lastIndexOf('#') != -1 ) {
        anchorHash = anchorHash.substr(anchorHash.lastIndexOf('#'));
        if( $('a[href="'+ anchorHash +'"]').length > 0 ) {
            $('a[href="'+ anchorHash +'"]').trigger('click');
        }
    }
});
</script>
</body>
</html>

Upvotes: 1

Related Questions