0

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

我的标签代码在这里：

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

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

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

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

问候

4

2 回答 2

0

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

一步一步的小教程：

  1. 数据源http://www.your_domain.com/get_info：在 PHP 中，您必须编写一些代码，根据 POST 或 GET 参数调用新 URL（类似于 ）时回显所需数据。对于这个例子，我想使用 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 添加到您的页面，只需将以下代码段添加到<head>您的 HTML 中：）<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/

于 2013-11-12T16:38:51.630 回答
0

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 操作它。所以在 switch 之后插入你想要的值而不是Jtext::_( 'OTHER_INFORMATION')

于 2013-11-12T16:10:06.683 回答