Как получить ссылку в закладках бутстраповских

Question

я хочу в этом язычки кода получить ссылку для вкладок непосредственно

как этот пример: domainname.com/index.php#tab3

любая идея для получения URL вкладки, потому что я хочу использовать в форме ...

Как получить ссылку в закладках бутстраповских

кода непосредственно: 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> 

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

Если оленья кожа работа, попробуйте использовать SRC с помощью URL:

<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")); 
});