Wie kann ich Link in Bootstrap-Tabs

Question

i in diesem Registerkarten Code wollen bekommen Sie den Link für Reiter: domainname.com/index.php#tab3

eine Idee, für die URL erhalten Tabs, weil ich in Form verwenden möchten ...

Wie kann ich Link in Bootstrap-Tabs

Code direkt erhalten: 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

Sie können leicht die Kontrolle über Sie Registerkarten erhalten, indem Funktion folgen. Definieren Sie eine globale Variable und wann immer Tab angezeigt wird, fügen Sie den Namen der Registerkarte in der aktuellen 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"; 
    }); 

Update: hier ist eine schnelle Arbeit um, und ich hoffe, es wird für Sie arbeiten.

<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 (effektiver):

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

Wenn doesnot Arbeit, versuchen src über 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

Verwendung dieses

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