javascript - 链接 anchor 文本以打开特定选项卡

Question

我不知道为什么它不起作用。我有导航选项卡的 anchor 文本链接。 我希望当我单击 anchor 文本时，应该打开特定的导航选项卡。 就像我单击 tabtwo anchor 时一样。 tab2 应该打开导航选项卡，顺便说一句，它们位于同一页面。有人怎么操作吗？请帮我。

我是 JavaScript 新手。我不知道从哪里开始编写 JavaScript

enter image description here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="margin-top: 100px;">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div>
        <!--bib-->
        <div class="row">
          <div class="col-md-4">
            <a id="tabs1" href="#tabone">tabone</a>
          </div>

          <div class="col-md-4">
            <a id="tabs2" href="#tabtwo">tabtwo</a>
          </div>

          <div id="tabs3" class="col-md-4">
            <a role ="tabpanel" href="#tabthree">tabthree</a>
          </div>
        </div>
    
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" id="list-item" role="tablist">
          <li role="presentation" class="active"><a href="#tabone" aria-controls="tabone" role="tab" data-toggle="tab">tab1</a></li>
          <li role="presentation"><a href="#tabtwo" aria-controls="tabtwo" role="tab" data-toggle="tab">tab2</a></li>
          <li role="presentation"><a href="#tabthree" aria-controls="tabthree" role="tab" data-toggle="tab">tab3</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="tabone">
            <h3>sample1</h3>
          </div>
          <div role="tabpanel" class="tab-pane" id="tabtwo">
            <h3>sample2</h3>
          </div>
          <div role="tabpanel" class="tab-pane" id="tabthree">
            <h3>sample3</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

给你一个解决方案

$(document).ready(function(){
  $('.userhref').click(function(){
    $('#list-item').find('li').find('a[href=' + $(this).attr('href') + ']').closest('li').addClass('active').siblings('li').removeClass('active');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="margin-top: 100px;">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div>
        <!--bib-->
        <div class="row">
          <div class="col-md-4">
            <a class="userhref" id="tabs1" href="#tabone" role="tab" data-toggle="tab">tabone</a>
          </div>

          <div class="col-md-4">
            <a class="userhref" id="tabs2" href="#tabtwo" role="tab" data-toggle="tab">tabtwo</a>
          </div>

          <div class="col-md-4">
            <a class="userhref" id="tabs3" href="#tabthree" role="tab" data-toggle="tab">tabthree</a>
          </div>
        </div>

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" id="list-item" role="tablist">
          <li role="presentation" class="active"><a href="#tabone" aria-controls="tabone" role="tab" data-toggle="tab">tab1</a></li>
          <li role="presentation"><a href="#tabtwo" aria-controls="tabtwo" role="tab" data-toggle="tab">tab2</a></li>
          <li role="presentation"><a href="#tabthree" aria-controls="tabthree" role="tab" data-toggle="tab">tab3</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="tabone">
            <h3>sample1</h3>
          </div>
          <div role="tabpanel" class="tab-pane" id="tabtwo">
            <h3>sample2</h3>
          </div>
          <div role="tabpanel" class="tab-pane" id="tabthree">
            <h3>sample3</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

您缺少 bootstrap.js 文件。查看 CSS 和 JS 文件的顺序。

由于bootstrap使用了jQuery，所以需要先加载jQuery，然后加载bootstrap。

希望这对您有帮助。