Question

我为TAB功能创建了一个简单的jquery片段。

但是我想让它可以重复使用，这样当我复制HTML标记时，它会创建一个标签，我只会更改标签标题和内容。

我不想创建一个jquery插件，而是想用jquery和javascript来实现这个。

有人可以对此有所了解吗？

jsbin - http://jsbin.com/niqiline/1/edit

  Javascript
  ==========
  var tabs = (function() {

            function init() {

                $(".tab-content").not(":first").hide();
                $("ul.tab-headings li:first").addClass("tab-headings--active").show();

                $("ul.tab-headings li").on('click', function() {
                    $(this).parent().find('li.tab-headings--active').removeClass("tab-headings--active");
                    $(this).addClass("tab-headings--active");

                    //tabContent.hide();
                    $($('a', this).attr("href")).fadeIn('slow');

                    return false;
                });
            }
            init();
        })();


  HTML
  ==========
   <!-- First Tab -->
        <div class="tab">
            <ul class="tab-headings">
                <li><a href="#tab1">Tab1</a>
                </li>
                <li><a href="#tab2">Tab2</a>
                </li>
            </ul>
            <div class="tab-container">
                <div id="tab1" class="tab-content">
                    <p>ABC</p>
                </div>
                <div id="tab2" class="tab-content">
                    <p>XYZ</p>
                </div>
            </div>
        </div>

        <!-- Second Tab -->
        <div class="tab">
            <ul class="tab-headings">
                <li><a href="#tab3">Tab1</a>
                </li>
                <li><a href="#tab4">Tab2</a>
                </li>
            </ul>
            <div class="tab-container">
                <div id="tab3" class="tab-content">
                    <p>ABC</p>
                </div>
                <div id="tab4" class="tab-content">
                    <p>XYZ</p>
                </div>
            </div>
        </div>

Answer 1

您可以使用PHP包含来加载所需的HTML。在URL中使用它和查询字符串。我不认为您可以在服务器上没有选择要为您加载的正确文件的情况下执行此操作。您可以调整PHP文件以获得正确数量的选项卡，或者为不同数量的选项卡创建多个选项卡，或者为不同数量的选项卡输出不同HTML的PHP文件。此处给出的代码仅适用于两个选项卡。

以下是一个示例网址：example.com/tabs.php?tab1=page5&tab2=page27

在你的HTML文件中，将其添加到顶部

<?php
    $tab1 = $_GET['tab1'];
    $tab2 = $_GET['tab2'];
?>

然后用

替换第一个标签页眉

<?php
    switch ($tab1) {
        case "page5": 
            echo "The title of page 5";
            break;
    }
?>

将第二个标题页替换为相同但用＆＃34; tab2＆＃34;代替＆＃34; tab1＆＃34;

然后像这样替换每个标签的内容

<?php include $tab1 . ".php"; ?>

将HTML文件另存为PHP文件。获取文件的内容并将其放在PHP文件中。无论您的查询字符串是什么，都是加载的文件。在switch语句中保存选项卡标题。如果页面不在批准页面列表中，那么您应该有一个系统来检查是否设置了要加载的页面（可能在上面的switch语句中），然后应该给出错误。

这必须在启用PHP的服务器上运行，PHP不能处理除服务器之外的任何事情。该网址不具有可读性，您可以将服务器设置为将example.com/page5-page27等可读网址转换为完整网址，但这取决于您使用的服务器。

Answer 2

这就是我所做的，现在工作正常。 http://jsbin.com/niqiline/1/edit

    var tabs = (function(tab) {
        function init() {
                var tabContent = $(".tab-content", tab),
                    tabHeadings = $("ul.tab-headings", tab);

                tabContent.not(":first").hide();
                tabHeadings.find("li:first").addClass("tab-headings--active").show();

                $("li", tabHeadings).on('click', function() {
                    tabHeadings.find('li.tab-headings--active').removeClass("tab-headings--active");
                    $(this).addClass("tab-headings--active");

                    tabContent.hide();
                    $($('a', this).attr("href")).fadeIn('slow');

                    return false;
                });
            }
            init();
    });
    tabs($("#tab"));
    tabs($("#tab1"));

使用Javascript / Jquery创建可重用的选项卡功能

2 个答案: