How to set a href to bootstrap navbar onclick menu it should trigger to tabbar of another page

I have explain my query with this code. here when i click on dropdown navbar page should redirect to the tabbar available on another page.

<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>

    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="page1.html">Page 1-1</a></li>
          <li><a href="#">Page 3-tab1</a></li>
          **<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->**
          <li><a href="#">Page 3-tab2</a></li>
           **<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->**
          <li><a href="#">Page 3-tab3</a></li>
          **<!-- Onclick "page3-tab3" it should redirect to page3 should be displayed tab3 activated -->**
        </ul>
      </li>
      <li><a href="page2.html">Page 2</a></li>
      <li><a href="page3.html">Page 3</a></li>
      <!-- Page 3 Contains one  tabbar having 3 tabs -->
    </ul>

  </div>
</nav>

Page-3.html contains a tabbar should be activated and redirect on screen on click menubar.

    <ul class="nav nav-pills nav-fill" role="tablist">
  <li class="nav-item active">
    <a class="nav-link" data-toggle="tab" href="#tab1" role="tab">Tab1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2" role="tab">Tab2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab3" role="tab">Tab3<br></a>
  </li>
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    <h3>Tab 1</h3>
    <p>Some content.</p>
  </div>
  <div id="tab2" class="tab-pane fade">
    <h3>Tab 2</h3>
     <p>Some content.</p>
  </div>
  <div id="tab3" class="tab-pane fade">
    <h3>Tab 3</h3>
     <p>Some content.</p>
  </div>
</div>

I am new in jquery and it can be done through javascript/jquery. But i dont know exactly how to do it. So,please can anyone help me??Thank you in advance