Question

我希望在此标签代码中直接获取标签链接

像这样的ex：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>

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

如果不起作用，请尝试通过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"));
});

如何在引导选项卡中获取链接

2 个答案: