Question

我是Javascript的新手，我无法根据网址显示和隐藏一些div。

我需要根据网址显示4个div。 4个div是：

Div 1

<body onload="callOnPageLoad1()”>
<div id="homeName" style="display:block"><h5>HOME</h5></div>

并且只有在以下时才需要显示：

http://www.fitzofdesign.com/

Div 2

<body onload="callOnPageLoad2()”>
<div id="profilesName" style="display:block"><h5>PROFILES</h5></div>

并且只有在以下时才需要显示：

http://www.fitzofdesign.com/?category=Profiles

Div 3

<body onload="callOnPageLoad3()”>
<div id="retailName" style="display:block"><h5>RETAIL</h5></div>

并且只有在以下时才需要显示：

http://www.fitzofdesign.com/?category=Retail

Div 4

<body onload="callOnPageLoad4()”>
<div id="blogName" style="display:block"><h5>BLOG</h5></div>

并且只有在以下时才需要显示：

http://www.fitzofdesign.com/?category=Blog

我正在使用的JS是：

<script type="text/javascript">
function callOnPageLoad1()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('homeName').style.display = 'none';
}
}
</script>

<script type="text/javascript">
function callOnPageLoad2()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('profilesNamed').style.display = 'none';
}
}
</script>

<script type="text/javascript">
function callOnPageLoad3()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Retail")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'block';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('retailName').style.display = 'none';
}
}
</script>

<script type="text/javascript">
function callOnPageLoad4()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Blog")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'block';
}
else {
document.getElementById('blogName').style.display = 'none';
}
}
</script>

目前唯一正确正常工作的时间是我在：

http://www.fitzofdesign.com/

因为Div 1出现而其他3个Div被隐藏。

当我在：

时，无法正常工作

http://www.fitzofdesign.com/?category=Profiles
http://www.fitzofdesign.com/?category=Retail
http://www.fitzofdesign.com/?category=Blog

因为Div 2,3和＆amp;每个网址都显示错误显示4个。

我希望这是有道理的。

有人可以帮忙吗？

感谢Rowan

Answer 1

您需要将所有这些功能组合成以下内容：

var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
    document.getElementById('homeName').style.display = 'block';
    document.getElementById('profilesNamed').style.display = 'none';
    document.getElementById('retailName').style.display = 'none';
    document.getElementById('blogName').style.display = 'none';
} 
else if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
    document.getElementById('homeName').style.display = 'none';
    document.getElementById('profilesNamed').style.display = 'block';
    document.getElementById('retailName').style.display = 'none';
    document.getElementById('blogName').style.display = 'none';
}

你需要确保在所有内容加载后调用此检查，因此放入类似jquery document.ready的内容：

$(document).ready(function() {
    var url = window.location.href
    // rest of the code
}

此外，您可能希望更改检查：

url == "http://www.fitzofdesign.com/?category=Profiles"

到

url.indexOf("category=Profiles") > -1

希望有所帮助

Answer 2

首先隐藏所有div。在window.onLoad事件中，获取查询字符串值并使用它来显示相应的div。

以下是提取查询字符串类别值的代码段。

function getParameterByName(name) {
        name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
        var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
            results = regex.exec(location.search);
        return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    }

Answer 3

好的，首先，您不需要将每个都放在自己的脚本标签中。把它们放在一起。

其次，将您在JS中重复的内容保存为性能变量和更清晰的代码：

var url = window.location.href,
fitz = "http://www.fitzofdesign.com/"
home = document.getElementById('homeName'),
profile = document.getElementById('profilesNamed'),
retail = document.getElementById('retailName').style.display,
blog = document.getElementById('blogName').style.display;

第三，你可以互相检查变量：

if( url == fitz ) {
    home.style.display = 'block';
    profile.style.display = 'none';
    retail.style.display = 'none';
    blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
    home.style.display = 'none';
    profile.style.display = 'block';
    retail.style.display = 'none';
    blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
    // etc.
}

最后，您需要创建一个事件侦听器，以确定何时发生单击或其他用户行为。这应该每次触发这个功能。

查找addEventListener

使用Javascript基于URL显示Div

3 个答案: