javascript - 如何设置 href 以 Bootstrap 导航栏 onclick 菜单它应该触发到另一个页面的标签栏

Question

我已经用这段代码解释了我的查询。在这里，当我点击下拉导航栏页面时，应该重定向到另一个页面上可用的标签栏。

<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 id="tab1" href="Page-3.html#tab1">Page 3-tab1</a></li>
          **<!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->**
          <li><a id="tab2" href="Page-3.html#tab2">Page 3-tab2</a></li>
           **<!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->**
          <li><a id="tab3" href="Page-3.html#tab3">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 包含一个标签栏，应该在点击菜单栏时激活并在屏幕上重定向。

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

我是 jquery 的新手，可以通过 javascript/jquery 完成。但我不知道该怎么做。那么，请问有人能帮帮我吗？？先谢谢了

Answer 1

您可以使用 jquery 来完成这项工作。

   <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 id="tab1" href="Page-3.html#menu1">Page 3-tab1</a></li>
                <!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->
                <li><a id="tab2" href="Page-3.html#menu2">Page 3-tab2</a></li>
                 <!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->
                <li><a id="tab3" href="Page-3.html#menu3">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>

然后在第 3 页

        <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>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="screen">
<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="#" id="gototab1">Page 3-tab1</a></li>
                <!-- Onclick "page3-tab1" it should redirect to page3 should be displayed tab1 activated -->
                <li><a href="#" id="gototab2">Page 3-tab2</a></li>
                 <!-- Onclick "page3-tab2" it should redirect to page3 should be displayed tab2 activated -->
                <li><a href="#" id="gototab3">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>
       <h1>page 3</h1>       
    <ul class="nav nav-tabs"  id="myTab">
        <li class="active"><a data-toggle="tab" href="#menu1">Tab1</a></li>
      <li><a data-toggle="tab" href="#menu2">Tab2</a></li>
      <li><a data-toggle="tab" href="#menu3">Tab3</a></li>  
    </ul>

    <div class="tab-content">
      <div id="menu1" class="tab-pane fade in active">
        <h3>Tab 1</h3>
        <p>Some content in tab 1.</p>
      </div>    

        <div id="menu2" class="tab-pane fade">
          <h3>Tab 2</h3>
           <p>Some content.</p>
        </div>
        <div id="menu3" class="tab-pane fade">
          <h3>Tab 3</h3>
           <p>Some content.</p>
        </div>    
    </div>
    <script>
    $(document).ready(function() {            
        var hash = $.trim( window.location.hash );
        console.log(hash);

        var thisLink = $('a[href="'+hash+'"]');
        console.log(thisLink.parent());
        hash = hash.substring(1);

        $(".active").removeClass("active");
        $(thisLink.parent()).addClass("active");
        $("#"+hash).addClass(" in active");

        $('#gototab1').click(function() {
            $('#myTab a[href="#menu1"]').tab('show');
        });

        $('#gototab2').click(function() {
            $('#myTab a[href="#menu2"]').tab('show');
        });

        $('#gototab3').click(function() {
            $('#myTab a[href="#menu3"]').tab('show');
        });            

    }); //end of document ready 

</script>