Question

我需要分别在选项卡tab2，tab3，tab4中显示a.php，b.php，c.php我已经编写了以下代码，但链接a.php，b.php，c.php不是分别显示在选项卡tab2，tab3，tab4中，而不是如果我点击tab2它重定向到a.php页面，但我需要以标签方式显示，如果我点击tab2它应该显示a.php在tab2中，我应该更改什么才能显示选项卡上的链接？请帮助我提前谢谢

    <script >
    $('#tab2').load('a.php');
    $('#tab3').load('b.php');
    $('#tab4').load('c.php');
      </script>
    </head>
    <body>

     <div class="tabbable" style="margin-bottom: 18px;">
              <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1" data-toggle="tab">Request Audit</a></li>
                <li class=""><a href="#tab2" data-toggle="tab">Status</a></li>
                <li class=""><a href="#tab3" data-toggle="tab">Settings</a></li>
                <li class=""><a href="#tab4" data-toggle="tab">Help</a></li>
              </ul>
              <div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
                <div class="tab-pane active" id="tab1">
                  <p>Placeholder 1</p>
                </div>
                <div class="tab-pane" id="tab2">
                  <p>Placeholder 2</p>
                </div>
                <div class="tab-pane" id="tab3">
                  <p>Placeholder 3</p>
                </div>
                <div class="tab-pane" id="tab4">
                  <p>Placeholder</p>
                </div>
              </div>
            </div>
</body>

Answer 1

您可以使用 $（“＃tab1”）更改href链接.attr（“href”，“＃a.php”）;

$(function(){
  $("#tab1").attr("href", "#a");
  $("#tab2").attr("href", "#b");
  $("#tab3").attr("href", "#c");
  $("#tab4").attr("href", "#d");
   
  
  
  });

$(document).ready(function() {
  $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  

<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current"><a id="tab1" href="#tab-1">Tab 1</a></li>
        <li><a id="tab2" href="#tab-2">Tab 2</a></li>
        <li><a id="tab3" href="#tab-3">Tab 3</a></li>
        <li><a id="tab4" href="#tab-4">Tab 4</a></li>
    </ul>
    <div class="tab">
        <div id="a" class="tab-content">
            <p>Tesing a.php </p>
        </div>
        <div id="b" class="tab-content">
            <p>Tesing b.php </p>
        
        </div>
        <div id="c" class="tab-content">
            <p>Tesing c.php  </p>
        </div>
        <div id="d" class="tab-content">
            <p>Tesing d.php </p>
        </div>
    </div>
</div>

Answer 2

<强>解决方案修复是将您的脚本代码放入文档就绪函数，如下所示

<script>
$(window).load(function() {
      $('#tab2').load('a.php');
      $('#tab3').load('b.php');
      $('#tab4').load('c.php');
});
</script>

替代解决方案 或者，您可以如下锻炼。当您从第三方域加载jquery时，此文档就绪语句首先异步执行。所以下载jquery.min.js并从本地加载它。

如何在bootstrap中显示选项卡中的链接？

2 个答案: