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

我正在尝试学习并且仍然在吸取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>
$(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>

参考方案

我认为，这样做会更好，特别是如果您想在选项卡中显示PHP生成的内容，而不是通过JavaScript动态设置内容，则所有的选项卡内容都已经存在于HTML代码中。您可以仅使用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 <= 8，则可以使用隐藏的单选按钮以及CSS伪类（:checked）和同级（+）选择器的组合来完全不使用任何JavaScript来执行此操作。 。

我还为此方法提供了demo。

如何从php中获取datatables jQuery插件的json数据 - php

我是PHP的新手，正在尝试使用Datatables jQuery插件。我知道我必须从.php文件中获取数据，然后在数据表中使用它，但是我似乎无法通过ajax将其传递给数据表。我设法从数据库中获取数据，并对其进行json编码，但是后来我不知道如何在我的index.php文件中调用它，并在其中显示它。我究竟做错了什么？这是我的代码：HTML（已编辑）： <…

代码未在服务器目录php中创建文件 - php

我正在尝试使用以下代码将新文件写入服务器error_reporting(E_ALL); ini_set('display_errors', 1); if($_SERVER['REQUEST_METHOD'] == "POST") { $html = $_POST['html'];…

PHP:将数组值加在一起 - php

我相信这比标题听起来要难一些，但我可能完全错了。我有一个像这样的数组：[["londrina",15],["cascavel",34],["londrina",23],['tiradentes',34],['tiradentes',21]] 我希望能够采用通用…

如何在提交时关闭fancybox…需要帮助 - php

当用户提交表单时，我真的需要关闭此弹出框（fancybox）...现在，它会在2秒后重定向到相同的表单（signup.php），但我想说的是“谢谢”消息，然后关闭框...<h1>SIGN UP</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.&…

PHP JQuery复选框 - php

我有以下片段。 var myData = { video: $("input[name='video[]']:checked").serialize(), sinopse: $("#sinopse").val(), dia: $("#dia").val(), quem: $(&#…