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

Question

I don't know why it didn't work. I have anchor text to link for the Nav tab. I want when I click the anchor text the specific navtab should open. like when I click tabtwo an anchor. the tab2 a navtab should open, btw they are with the same page. Is there someone how it works? please help me.

I am new to JavaScript. I don't know where I start in coding a 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

Try this, if this is what you are looking for.

<div >
<ul class="nav nav-tabs" id="list-item" role="tablist">
     <li role="presentation" class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
     <li role="presentation"><a data-toggle="tab" href="#tab2">Tab2</a></li>
     <li role="presentation"><a data-toggle="tab" href="#tab3">Tab3</a></li>
</ul>
</div>
 <div class="tab-content">
    <div id="tab1" class="tab-pane active"> </div>
    <div id="tab2" class="tab-pane"> </div>
    <div id="tab3" class="tab-pane"> </div>
 </div>

Answer 2

Here you go with a solution

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

You are missing bootstrap.js file. Have a look into the ordering of the CSS & JS files.

Since bootstrap uses jQuery, so you need to load jQuery first then bootstrap .

Hope this will help you.