は、私は、このタブコードにしたい

Question

は、タブのリンクこの例のように直接

を取得します私は

コードを直接ブートストラップのタブでリンクを取得するにはどうすればよいのタブ私は、フォームで使用したいので...

：http://www.bootply.com/D4A2AglssW#3

  <div class="container" id="myWizard"> 
      <div class="navbar"> 
       <div class="navbar-inner"> 
        <ul class="nav nav-pills"> 
         <li class="active"><a href="#step1" data-toggle="tab">Step 1</a></li> 
         <li><a href="#step2" data-toggle="tab">Step 2</a></li> 
         <li><a href="#step3" data-toggle="tab">Step 3</a></li> 
         <li><a href="#step4" data-toggle="tab">Step 4</a></li> 
         <li><a href="#step5" data-toggle="tab">Step 5</a></li> 
        </ul> 
       </div> 
      </div> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="step1"> 
       <p>Here is the content for the first step...</p> 
       <a class="btn btn-default next" href="#">Continue</a> 
       </div> 
       <div class="tab-pane" id="step2"> 
       <p>Here is the content for step 2...</p> 
       <a class="btn btn-default next" href="#">Continue</a> 
       </div> 
       <div class="tab-pane" id="step3"> 
       <p>Here is the content for step 3...</p> 
       <a class="btn btn-default next" href="#">Continue</a> 
       </div> 
       <div class="tab-pane" id="step4"> 
       <p>Here is the content for step 4...</p> 
       <a class="btn btn-default next" href="#">Continue</a> 
       </div> 
       <div class="tab-pane" id="step5"> 
       <p>This is the last step. You're done.</p> 
       <a class="btn btn-success first" href="#">Start over</a> 
       </div> 
      </div> 
     </div> 

Javascriptを

 $('.next').click(function(){ 

     var nextId = $(this).parents('.tab-pane').next().attr("id"); 
     $('[href=#'+nextId+']').tab('show'); 

    }) 

    $('.first').click(function(){ 

     $('#myWizard a:first').tab('show') 

    }) 

Answer 1

あなたは簡単に機能を以下でごタブのコントロールを得ることができます。グローバル変数を定義し、タブが表示されるたびに、現在のURLにタブ名を追加します。

var url = window.location.href; 
var url_withtab = ""; //you can easily access current tab url on this variable whenever needed. 
$("body").on("shown.bs.tab", "#step1", function() { 
     //code to do after displaying step2 tab. 
     url_withtab = url+"#step1"; 
    }); 

$("body").on("shown.bs.tab", "#step2", function() { 
     //code to do after displaying step2 tab. 
     url_withtab = url+"#step2"; 
    }); 

$("body").on("shown.bs.tab", "#step3", function() { 
     //code to do after displaying step2 tab. 
     url_withtab = url+"#step3"; 
    }); 

アップデート：ここの周りの迅速な作業であり、私はそれがあなたのために働くことを願っています。

<div class="container" id="myWizard"> 
      <div class="navbar"> 
       <div class="navbar-inner"> 
        <ul class="nav nav-pills"> 
         <li class="active"><a onclick="setCurrentTabUrl('#step1')" href="#step1" data-toggle="tab">Step 1</a></li> 
         <li><a onclick="setCurrentTabUrl('#step2')" href="#step2" data-toggle="tab">Step 2</a></li> 
         <li><a onclick="setCurrentTabUrl('#step3')" href="#step3" data-toggle="tab">Step 3</a></li> 
         <li><a onclick="setCurrentTabUrl('#step4')" href="#step4" data-toggle="tab">Step 4</a></li> 
         <li><a onclick="setCurrentTabUrl('#step5')" href="#step5" data-toggle="tab">Step 5</a></li> 
        </ul> 
       </div> 
      </div> 
      <div class="tab-content"> 
       <div class="tab-pane active" id="step1"> 
       <p>Here is the content for the first step...</p> 
       <a class="btn btn-default next" href="#">Continue</a> 
       </div> 
       <div class="tab-pane" id="step2"> 
       <p>Here is the content for step 2...</p> 
       <a class="btn btn-default next" href="#">Continue</a> 
       </div> 
       <div class="tab-pane" id="step3"> 
       <p>Here is the content for step 3...</p> 
       <a class="btn btn-default next" href="#">Continue</a> 
       </div> 
       <div class="tab-pane" id="step4"> 
       <p>Here is the content for step 4...</p> 
       <a class="btn btn-default next" href="#">Continue</a> 
       </div> 
       <div class="tab-pane" id="step5"> 
       <p>This is the last step. You're done.</p> 
       <a class="btn btn-success first" href="#">Start over</a> 
       </div> 
      </div> 
     </div> 

    <script> 

    var url = window.location.href; 
    var url_tab = "#step1"; //initially setting current tab to step1. 

    function setCurrentTabUrl(tab){ 
    url_tab = url+tab; 
    console.log(url_tab); 
    } 

    //now url_tab will contain current tab url. 
    </script> 

アップデート2（より効果）：

<script>  
     var url_tab = window.location.href+"#step1"; //initially store your first tab name since below code only execute after clicking on a tab, and first tab url will empty if not set.  
     $('.nav-pills a').on('show.bs.tab', function(e){ 
     url_tab = this.href; 
     console.log(this.href); 
     }); 
     //url_tab contain current url of tab. 
    </script> 

doesnot作業する場合は、URLを介してSRCを使用してみてください：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

Answer 2

使用この

$(".nav-pills>li>a").click(function(){ 
    alert($(this).attr("href")); 
});