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

我正在努力学习jquery和javascript，但仍然在学习jquery和javascript，我不知道如何通过搜索来正确表达这一点，从而获得任何有用的答案，所以我来了

我有一个盒子，里面有三个div作为标签。单击每个选项卡时，它会将不同的内容加载到另一个简单分区中。下面的代码在功能上是可行的，但我感觉它不是很实用或高效，另外我需要能够在选项卡内容中使用HTML和PHP，而我似乎不知道如何实现

我的两个问题是，有没有一种方法可以将它组合成一个更简单的函数？当单击每个选项卡时，将HTML和PHP内容加载到div中的最佳方式是什么

HTML:

描述
规格
接触
默认选项卡1内容

脚本：

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

$（函数（）{
$（'.space details tab.one'）。单击（function（）{
var tabcontent=“表1内容”；
document.getElementById（'single-space-tab-content'）。innerHTML=tabcontent；
$（'.space details tab'）.css（“背景色”，“#eee”）；
$（this.css（“背景色”，“#fff”）；
});
});
$（函数（）{
$（'.space details tab.two'）。单击（function（）{
var tabcontent=“第二个选项卡测试内容”；
document.getElementById（'single-space-tab-content'）。innerHTML=tabcontent；
$（'.space details tab'）.css（“背景色”，“#eee”）；
$（this.css（“背景色”，“#fff”）；
});
});
$（函数（）{
$（'.space details tab.three'）。单击（function（）{
var tabcontent=“Tab 3测试内容”；
document.getElementById（'single-space-tab-content'）。innerHTML=tabcontent；
$（'.space details tab'）.css（“背景色”，“#eee”）；
$（this.css（“背景色”，“#fff”）；
});
});

我认为，最好是将所有选项卡内容都显示在HTML代码中，而不是通过JavaScript动态设置内容，特别是如果您希望在选项卡中显示PHP生成的内容。您可以使用

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();
        });
    });
});

---

---

另外，如果你不需要支持IE谢谢，这正是我想要的答案。您的第一个示例将非常有效。多谢！

$(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();
        });
    });
});