Javascript 单击元素时更改URL和CSS_Javascript_Jquery_Css

Javascript 单击元素时更改URL和CSS

javascript jquery css

Javascript 单击元素时更改URL和CSS,javascript,jquery,css,Javascript,Jquery,Css,基本上，我的网站上有几个页面，我使用PHP将内容包含在页面中，并使用jQuery将CSS中的显示设置为“无”或“块”，从而在内容之间进行“切换”。然而，我正在努力让它在主页上的菜单工作。因此，我需要当用户单击适当的链接时，页面将更改为包含内容的页面，但也应用适当的CSS来显示适当的内容。到目前为止，我已经（URL被屏蔽）： $（文档）.ready（函数（）{ $（“#我们的任务菜单”）。单击（函数（）{ window.location=http://beta.***.com/aboutUs.p

基本上，我的网站上有几个页面，我使用PHP将内容包含在页面中，并使用jQuery将CSS中的显示设置为“无”或“块”，从而在内容之间进行“切换”。然而，我正在努力让它在主页上的菜单工作。因此，我需要当用户单击适当的链接时，页面将更改为包含内容的页面，但也应用适当的CSS来显示适当的内容。到目前为止，我已经（URL被屏蔽）：


$（文档）.ready（函数（）{
$（“#我们的任务菜单”）。单击（函数（）{
window.location=http://beta.***.com/aboutUs.php'；
$（'#rightReplace'）.css({
“显示”：“无”
});
$（“#我们的历史”）.css({
“显示”：“无”
});
$（'#meetTeam'）.css({
“显示”：“无”
});
$（“#社区拓展”）.css({
“显示”：“无”
});
$（'#connectUs'）.css({
“显示”：“无”
});
$（'#blog'）.css({
“显示”：“无”
});
$（“#我们的使命”）.css({
“显示”：“块”
}); 
});
});

不能

aboutUs.php

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

看起来

css（）

调用将应用于当前页面，而不是目标页面。

不能

aboutUs.php

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

看起来

css（）

调用将应用于当前页面，而不是目标页面。

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

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

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

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

一旦更改了

window.location

属性，浏览器将用户重定向到指定的URL，JavaScript的执行将立即停止

因此，您的

.css（）

函数调用没有运行，但这并不重要，因为它们将改变当前页面上的DOM，而不是下一页面上的DOM

那些

.css（）

函数调用需要在下一页上运行，如下所示：

首页--

第二页（aboutUs.php）--

但是如果您正在动态构建

aboutUs.php

页面，这将非常奇怪。您还可以利用PHP的使用，用PHP而不是JavaScript设置元素的显示（JavaScript是客户端的，这意味着它需要用户的浏览器来完成工作）。

一旦更改了

window.location

属性，浏览器将用户重定向到指定的URL，JavaScript的执行将立即停止

因此，您的

.css（）

函数调用没有运行，但这并不重要，因为它们将改变当前页面上的DOM，而不是下一页面上的DOM

那些

.css（）

函数调用需要在下一页上运行，如下所示：

首页--

第二页（aboutUs.php）--

但是如果您正在动态构建

aboutUs.php

页面，这将非常奇怪。您还可以利用PHP的使用，用PHP而不是JavaScript（这是客户端的，意味着它需要用户的浏览器才能工作）来设置元素的显示。

除了Paul和sérgio提到的之外，您还可以像下面这样组合选择器，而不是多个块

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

在Paul和Sérgio提到的基础上，您可以像下面那样组合选择器，而不是多个块

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

上面的代码有什么不起作用？现在会发生什么？您只需使用或

隐藏

，而不用更改

显示

属性。当页面更改为“aboutUs.php”时，脚本将停止。您可以控制将显示在服务器端的数据…加载“aboutUs”页面。。。但不是CSS。谢谢你在屏幕上的提示。上面的代码有什么不起作用的？现在会发生什么？您只需使用或

隐藏

，而不用更改

显示

属性。当页面更改为“aboutUs.php”时，脚本将停止。您可以控制将显示在服务器端的数据…加载“aboutUs”页面。。。但不是CSS。谢谢你的提示。这个菜单在“index.php”上，我需要显示的内容在“aboutUs.php”页面上。因此，我需要加载aboutUs页面，然后将css更改为“显示”适当的内容。如何将css应用于我需要的页面？此菜单位于“index.php”上，而我需要显示的内容位于“aboutUs.php”页面上。因此，我需要加载aboutUs页面，然后将css更改为“显示”正确的内容。我如何将css应用于我需要的页面？或者：

$（“#rightReplace，#ourHistory，#meetTeam，#communityOutreach，#connectUs，#blog，#ourMission”）。hide（）

感谢您的清理。我是网络开发新手。你做得更好。。。答对了我现在已经更新了杰作：）或：

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

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