Question

基本上，我在我的网站上有几个页面，我使用PHP在页面中包含内容，并使用jQuery通过将CSS中的显示设置为“none”或“block”来“切换”内容。但是，我很难通过菜单让它在主页面中运行。所以我需要当用户点击相应的链接时，页面将更改为包含内容的页面，但也应用适当的CSS来显示相应的内容。到目前为止，我已经（URL被阻止了）：

<script type="text/javascript">
    $(document).ready(function(){
        $('#ourMissionMenu').click(function() {
                window.location = 'http://beta.***.com/aboutUs.php';
                $('#rightReplace').css({
                  "display":"none"
                  });
                  $('#ourHistory').css({
                  "display":"none"
                  });
                  $('#meetTeam').css({
                  "display":"none"
                  });
                  $('#communityOutreach').css({
                  "display":"none"
                  });
                  $('#connectUs').css({
                  "display":"none"
                  });
                  $('#blog').css({
                  "display":"none"
                  });
                   $('#ourMission').css({
                  "display":"block"
                  }); 
        });
});


</script>

Answer 1

如果您更改窗口的位置，则当前页面中的所有javascript都将停止。您不能指望一个页面的javascript控制另一个页面上的内容。这将是一次严重的安全违规行为。

您需要在＆＃34; aboutUs.php＆＃34;上运行javascript，或者将aboutUs内容动态加载到当前页面中。或者，更好的是，首先让aboutUs.php拥有正确的css。

Answer 2

aboutUs.php只能链接到具有正确样式的CSS文件吗？为什么需要在Javascript中设置它们？

看起来css()调用也会应用于当前页面，而不是目标页面。

Answer 3

更改window.location属性后，浏览器会将用户重定向到指定的URL，并立即停止执行JavaScript。

所以你的.css()函数调用没有运行，但这并不重要，因为它们会改变当前页面上的DOM，而不是下一页。

这些.css()函数调用需要在下一页运行，如下所示：

第一页 -

$(function(){
    $('#ourMissionMenu').click(function() {
        window.location = 'http://beta.***.com/aboutUs.php';
    });
});

第二页（aboutUs.php） -

$(function(){
    $('#rightReplace').css({
        display:"none"
    });
    $('#ourHistory').css({
        display:"none"
    });
    $('#meetTeam').css({
        display:"none"
    });
    $('#communityOutreach').css({
        display:"none"
    });
    $('#connectUs').css({
         display:"none"
    });
    $('#blog').css({
        display:"none"
    });
    $('#ourMission').css({
        display:"block"
    });
});

但是如果你动态构建aboutUs.php页面，那就太奇怪了。您也可以利用PHP的使用，并使用PHP而不是JavaScript（这是客户端，这意味着它需要用户的浏览器才能工作）来设置元素的显示。

Answer 4

除了Paul和Sérgio所提到的，你可以像下面那样编制选择器而不是多个块。

$('#rightReplace,#ourHistory,#meetTeam,#communityOutreach,#connectUs,#blog,#ourMission').hide();

单击元素时更改URL和CSS

4 个答案: