链接锚文本以打开特定选项卡

时间:2017-12-14 03:05:49

标签: javascript jquery html tabs

我不知道为什么它不起作用。我有锚文本链接导航选项卡。 我想在单击锚文本时打开特定的navtab。 就像当我点击tabtwo一个锚点。 tab2一个navtab应该打开,顺便说一下它们是同一个页面。是否有人如何运作?请帮我。

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

enter image description here


log.addLevel('silly', -Infinity, { inverse: true }, 'sill')

2 个答案:

答案 0 :(得分:0)

试试这个,如果这是你想要的。

xcode-select --install

答案 1 :(得分:0)

您可以使用解决方案

$(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&amp;的排序。 JS文件。

由于bootstrap使用jQuery,因此您需要先加载jQuery,然后bootstrap

希望这会对你有所帮助。