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

Creating a reusable tab functionality using Javascript/Jquery

本文关键字：选项 功能 Javascript Jquery 创建 使用      更新时间：2023-09-26

我已经为制表功能创建了一个简单的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>

您可以使用PHP include来加载所需的HTML。使用那个和URL中的查询字符串。我认为，如果服务器上没有为您选择正确的文件来加载，您就无法做到这一点。您可以为正确的选项卡数量调整PHP文件，或者为不同数量的选项卡创建多个选项卡，或者让PHP文件为不同数量的选项卡输出不同的HTML。这里给出的代码只适用于两个制表符。

URL: 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;
    }
?>

用"tab2"代替"tab1"

然后像这样替换每个选项卡的内容

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

将HTML文件保存为PHP文件。将文件的内容放入一个PHP文件中。查询字符串中的内容就是加载的文件。在switch语句中保存选项卡头。你应该有一个系统来检查你想要加载的页面是否被设置(可能在上面的switch语句中)，如果页面不在批准的页面列表中，那么应该给出一个错误。

必须在启用PHP的服务器上运行，PHP只能在服务器上工作。这个URL不是很好读，你可以设置服务器将可读的URL，如example.com/page5-page27转换为完整的URL，但这取决于你使用的服务器。

这就是我所做的，它现在工作得很好。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"));
相关文章：