根据上一个选项卡的选择器重新加载选项卡

reload a tab based on selector of previous tab

本文关键字：选项 新加载 加载 选择器 上一个      更新时间：2023-09-26

我不确定如何根据上一个选项卡中的选择器重新加载选项卡时遇到问题。

我的选项卡代码在这里：

<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

您可以使用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

您还可以使用 PHP 进行操作，方法是在将 Jtext::_( 'GENERAL_INFORMATION') 插入链接之前切换的输出。因此，在开关后插入所需的值，而不是Jtext::_( 'OTHER_INFORMATION')

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

一个循序渐进的教程：

  1. 数据源：在PHP中，您必须编写一些代码，在调用新URL（例如http://www.your_domain.com/get_info）时回显所需的数据，具体取决于POST或GET参数。对于此示例，我想使用 GET 参数，这将导致http://www.your_domain.com/get_info?address_id=1（1只是一个示例 id 值）

  2. 容器：然后在 HTML 中将容器添加到数据的选项卡中。它需要一个 id，所以你可以用 JavaScript 使用它。类似<li><a href="#addpropertypanel2" data-toggle="tab"><s1><div id="general_information"></div></s1></a></li>

  3. 事件：现在你有一个数据源（新的URL）和一个目标（HTML选项卡中的容器），你需要做的就是使用一些JavaScript将数据从源添加到目标中。但是在将事件绑定到<select>之前，您应该给它一个 id，以简化绑定（类似于 <select id="addresses_select"> ）。我强烈建议使用 jQuery 进行绑定，因为它对新开发人员来说很容易，而且它适用于所有浏览器。（要将jQuery添加到您的页面，只需将以下代码片段添加到HTML的<head>中：<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>）。使用 jQuery 时，您可以使用以下代码片段来检索所需的数据并将其注入 HTML 容器中。

jQuery 事件代码段：

$('#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/

相关文章：