如何在引导程序的选项卡中显示链接？答案

【问题标题】：how to display the links in tabs in bootstrap?如何在引导程序的选项卡中显示链接？
【发布时间】：2017-06-21 19:36:35
【问题描述】：

我需要分别在标签 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>

【问题讨论】：

您需要包含 jquery ，并将您的代码包装在 $(document).ready();
我已经为 jquery 插入了这个
签出此jsfiddle.net/syahrasi/us8uc
我需要在选项卡tab2中显示a.php，b.php，c.php中的内容应该包含a.php中的内容，这样我该怎么做？？
您确定问题出在 JQuery 上，而不是您尝试加载的数据上吗？ .load() 上的Documentation 包含有关如何检查加载内容的错误的详细信息。您的代码看起来不错 - 我会说问题更有可能与您尝试加载的内容有关。

标签： javascript jquery html twitter-bootstrap-3

【解决方案1】：

您可以使用 $("#tab1").attr("href", "#a.php"); 来更改 href 链接；

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

【讨论】：

如果它不起作用，请告诉我。你可以改变你想给你可以给的href链接。
如果你想这样检查一下？
我已经改变了一切，但它不起作用 a.php 中的内容，b.php，c.php 没有显示
你现在可以检查@ArunKumaresh
您是要打印标记还是动态内容？

【解决方案2】：

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

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

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

【讨论】：

@ArunKumaresh 我知道出了什么问题。我更新了我的答案。根据需要尝试任一解决方案。第一个是用窗口加载替换 document.ready。第二个是从本地加载 jquery.min.js
@ArunKumaresh 您在控制台中遇到任何错误吗？
当我点击标签时没有错误没有显示只有空屏幕显示@thanga
你能像localhost/a.php这样在浏览器中单独运行你的php文件吗
yup php 文件在 localhost 中运行良好，但未显示在选项卡中