根据上一个标签页的选择器重新加载标签页

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>

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

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

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

问候

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')的输出切换到链接之前，通过PHP对其进行操作。 因此，请在切换后插入所需的值，而不是Jtext::_( 'OTHER_INFORMATION')

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>
事件：现在您已经有了一个数据源（新的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/

根据上一个标签页的选择器重新加载标签页

问题描述

2 个解决方案

解决方案1
0 2013-11-12 16:10:06

解决方案2
0 2013-11-12 16:38:51

根据上一个标签页的选择器重新加载标签页

问题描述

2 个解决方案

解决方案1 0 2013-11-12 16:10:06

解决方案2 0 2013-11-12 16:38:51

解决方案1
0 2013-11-12 16:10:06

解决方案2
0 2013-11-12 16:38:51