0

I'm developing a web page which has dynamic tabs from Bootstrap. I'm having problem in linking a tab's content from an external page.
I want to activate the menu 1 and menu 2 tab of the page below from an external link of another page.
Tried using href="index.html#menu1" but it doesn't work.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>index</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.2.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">
  <div class="row">
  <div class="col-sm-3">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
  </ul>
  </div>
  <div class="col-sm-9">
  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3>Menu 1</h3>
      <p>Menu 1 activated.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Menu 2 Activated </p>
    </div>
  </div>
</div>
</div>
</body>
</html>
Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
TK Rohit
  • 28
  • 4

1 Answers1

2

thanks to this answer about query string and this answer about to show Bootstrap's tab, add the following script to your page and generate links on the other pages by using query string!

function getQuery(url) {
  var query = {},
      href = url || window.location.href;
  href.replace(/[?&](.+?)=([^&#]*)/g, function (_, key, value) {
      query[key] = decodeURI(value).replace(/\+/g, ' ');
  });
  return query;
}

function getParam(name){
    var obj = getQuery();
    return obj[name];
}

$(document).ready(function() {
  var target = getParam('target');
  $('.nav a[href="#'+target+'"]').tab('show');
});
<!DOCTYPE html>
<html lang="en">
<head>
  <title>index</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.2.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">
  <div class="row">
  <div class="col-sm-3">
  <ul class="nav nav-pills nav-stacked">
    <li class="active"><a data-toggle="pill" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
  </ul>
  </div>
  <div class="col-sm-9">
  <div class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3>Menu 1</h3>
      <p>Menu 1 activated.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Menu 2 Activated </p>
    </div>
  </div>
</div>
<div class="row">
use the following script and 
the link on the other pages should be like this: url?target=menu2 
without "#" 
</div>
</div>
</body>
</html>
easa
  • 306
  • 2
  • 9