根据前一个选项卡的选择器重新加载选项卡答案

【问题标题】：reload a tab based on selector of previous tab根据前一个选项卡的选择器重新加载选项卡
【发布时间】：2013-11-12 15:45:22
【问题描述】：

我有一个问题，不知道如何根据前一个选项卡中的选择器重新加载选项卡。

我的标签代码在这里：

<ul class="nav nav-tabs">
    <li class="active">
        <a href="#addpropertypanel1" data-toggle="tab">
            <s1>
                <?php echo Jtext::_( 'ADDRESS');?>
            </s1>
        </a>
    </li>
    <li>
        <a href="#addpropertypanel2" data-toggle="tab">
            <s1>
                <?php echo Jtext::_( 'GENERAL_INFORMATION');?>
            </s1>
        </a>
    </li>
    <li>
        <a href="#addpropertypanel3" data-toggle="tab">
            <s1>
                <?php echo Jtext::_( 'OTHER_INFORMATION');?>
            </s1>
        </a>
    </li>
    <li>
        <a href="#addpropertypanel4" data-toggle="tab">
            <s1>
                <?php echo Jtext::_( 'PHOTOS');?>
            </s1>
        </a>
    </li>
</ul>

在我的常规信息选项卡中，有一个类别选择器可以选择一个值。选择的此值将影响选项卡中的其他信息中的内容。

我想知道如何仅根据在一般信息中选择的信息重新加载其他信息选项卡。

我是一个非常缺乏经验的程序员，非常感谢任何帮助。

问候

【问题讨论】：

标签： javascript php tabs reload

【解决方案1】：

JavaScript

您可以使用 JavaScript (jQuery) 根据链接的内容来操作链接。

请看这个例子：JsFiddle

var myValue = '';

switch( $('a[href=#addpropertypanel2]').text() ) {  
    // put here your all cases that Jtext::_( 'GENERAL_INFORMATION') can offer
    case "abc":
        myValue = "new value 1";
        break;
    case "def":
        myValue = "new value 2";
        break;
    case "GENERAL_INFORMATION": // just for example manipulation
        myValue = "new value 3";
        break;
}

$('a[href=#addpropertypanel3]').text( myValue );

PHP

您还可以通过在将Jtext::_( 'GENERAL_INFORMATION') 的输出插入链接之前切换它来使用PHP 操作它。所以在开关之后插入你想要的值而不是Jtext::_( 'OTHER_INFORMATION')

【讨论】：

【解决方案2】：

您需要绑定 AJAX 事件以从 PHP 加载所需的信息并将其注入到选项卡中。

一步一步的小教程：

数据源：在 PHP 中，您必须编写一些代码，根据 POST 或 GET 参数在调用新 URL（类似于http://www.your_domain.com/get_info）时回显所需的数据。对于此示例，我想使用 GET 参数，这将导致 http://www.your_domain.com/get_info?address_id=1（1 只是一个示例 id 值）
容器：然后在 HTML 中为您的数据添加一个容器到选项卡中。它需要一个 id，因此您可以将它与 JavaScript 一起使用。类似<li><a href="#addpropertypanel2" data-toggle="tab"><s1><div id="general_information"></div></s1></a></li>
事件：现在您已经有了一个数据源（新 URL）和一个目标（HTML 选项卡中的容器），您需要做的就是使用一些 JavaScript 将数据从源添加到目标。但在将事件绑定到 <select> 之前，您应该给它一个 id，以简化绑定（类似于 <select id="addresses_select">）。我强烈建议使用 jQuery 进行绑定，因为它对新开发人员来说很容易，而且它只适用于所有浏览器。（要将 jQuery 添加到您的页面，只需将以下 sn-p 添加到 HTML 的 <head> 中：<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>）。使用 jQuery 时，您可以使用以下 sn-p 检索所需数据并将其注入您的 HTML 容器中。

jQuery 事件 sn-p:

$('#addresses_select').change(function(){
  var selected_address_id = this.value;
  $.ajax({
    url: "/get_info?address_id=" + selected_address_id,
    success: function(desired_data_from_php) {
      $("#general_information").html("<p>" + desired_data_from_php + "</p>");
    }
  });
});

应该就是这样了。

祝你好运:-)

PS：在下面的小提琴中，您可以看到<select> 的事件是如何工作的：http://jsfiddle.net/LyLHL/

【讨论】：