Question

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

我的标签代码在这里：

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

在我的GENERAL INFORMATION选项卡中，有一个类别选择器可供选择一个值。选择的此值将影响Tab OTHER INFORMATION中的内容。

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

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

此致

Answer 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')的输出插入链接之前切换Jtext::_( 'OTHER_INFORMATION')的输出来使用PHP进行操作。因此，请在切换后插入所需的值，而不是{{1}}

Answer 2

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

一步一步的教程：

数据来源：在PHP中，您必须编写一些代码，在调用新URL（类似http://www.your_domain.com/get_info）时根据POST或GET参数回显所需的数据。对于此示例，我想使用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>
事件：现在您已拥有数据源（新网址）和目标（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/

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

2 个答案: