Question

我正在努力学习并且仍在吮吸jquery和javascript，我无法通过搜索来弄清楚如何通过搜索得到任何有用的答案，所以这里就是这样。

我有一个包含三个div的框作为标签。单击每个选项卡时，它会将不同的内容加载到另一个div中。简单。以下代码在功能方面起作用，但我觉得它不是很实用或有效，而且我需要能够在标签内容中使用HTML和PHP，而我似乎无法想象如何完成。

我的两个问题是，有没有办法将它组合成一个更简单的功能？并且，在单击每个选项卡时，将HTML和PHP内容加载到div中的最佳方法是什么？

HTML：

<div id="single-space-details">
    <div id="space-details-tabs">
        <div class="space-details-tab one">
        Description
        <a href="javascript:void(0);" class="linkwrap"></a>
        </div>
        <div class="space-details-tab two">
        Specs
        <a href="javascript:void(0);" class="linkwrap"></a>
        </div>
        <div class="space-details-tab contact three">
        Contact
        <a href="javascript:void(0);" class="linkwrap"></a>
        </div>
    <div style="clear:both;"></div>
    </div>
    <div id="single-space-tab-content">
        Default Tab one content
    </div>
<div style="clear:both;"></div>
</div>

SCRIPT：

    <script>
$(function() {
    $('.space-details-tab.one').click(function() {
        var tabcontent = "Tab 1 content";
            document.getElementById('single-space-tab-content').innerHTML = tabcontent;
        $('.space-details-tab').css("background-color","#eee");
        $(this).css("background-color","#fff");
    });
});
$(function() {
    $('.space-details-tab.two').click(function() {
        var tabcontent = "Second Tab Test Content";
            document.getElementById('single-space-tab-content').innerHTML = tabcontent;
        $('.space-details-tab').css("background-color","#eee");
        $(this).css("background-color","#fff");
    });
});
$(function() {
    $('.space-details-tab.three').click(function() {
        var tabcontent = "Tab 3 Test Content";
            document.getElementById('single-space-tab-content').innerHTML = tabcontent;
        $('.space-details-tab').css("background-color","#eee");
        $(this).css("background-color","#fff");
    });
});

</script>

Answer 1

我认为，如果你想在标签中显示PHP生成的内容，让所有标签内容都已经存在于HTML代码中，而不是通过JavaScript动态设置内容，那就更好了。您可以使用style="display: none;"隐藏除一个选项卡以外的所有选项卡，并在单击相应选项卡时显示正确的选项卡。

要将标签与各自的内容div相关联，您可以使用data属性。这也会减少你的jQuery代码：

$(function() {
    $('.space-details-tab').click(function() {
        $('.space-details-tab').removeClass('active');
        $(this).addClass('active');
        var tabId = $(this).data('tabid');
        $('.single-space-tab-content').each(function() {
            if ($(this).data('tabid') == tabId)
                $(this).show();
            else
                $(this).hide();
        });
    });
});

DEMO

作为替代方案，如果你不需要支持IE＆lt; = 8，你可以在没有任何JavaScript的情况下使用隐藏的单选按钮和CSS伪类（:checked）和兄弟的组合来做到这一点（+）选择器。

我还为此方法提供demo。

在jquery函数中使用HTML / PHP代码

1 个答案: