Question

日冰。我正在尝试在页面的开头创建一个内联样式表，它对我从网址获取的内容作出反应。我这样做，所以我可以让页面的导航按钮突出显示。有点像这里，www.myeg.net，但他们有一个静态网站，它更容易。

<script type="text/javascript">
function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search

function getSecondPart(str) {
    return str.split('=')[1];
}

var site=getSecondPart(page);

var style = document.createElement("style");
style.innerHTML = ".nav_" + page + " { background-image:url('images/gradients/transparent_gradient.png');}";
document.body.appendChild(style);


}
</script>
</head>
<body>
<center><div><img width="960px" height="187.5" src="images/fullbanner.png"></div></center>
<div id="wrapper">
<div id="navbar">
<ul>
<li class="nav_index"><a href="index.php">Home</a></li>
<li class="nav_archive"><a href="index.php?site=news&action=archive">News</a></li>
<li class="nav_squads"><a href="index.php?site=squads">Roster</a></li>
<li class="nav_forum"><a href="index.php?site=forum">Forums</a></li>
<li class="nav_about"><a href="index.php?site=about">Contact</a></li>
</ul>

我在javascript非常棒，很抱歉;;;

Answer 1

试试这个：

<style type="text/css">
#banner{text-align:center;}
#banner>img{width:960px;height:187.5px;}
#nav>.selected{background-image:url('images/gradients/transparent_gradient.png');}
</style>
</head>
<body>
<div id="banner"><img src="images/fullbanner.png"></div>
<div id="wrapper">
<div id="navbar">
<ul id="nav">
<li id="nav_index"><a href="index.php">Home</a></li>
<li id="nav_archive"><a href="index.php?site=news&action=archive">News</a></li>
<li id="nav_squads"><a href="index.php?site=squads">Roster</a></li>
<li id="nav_forum"><a href="index.php?site=forum">Forums</a></li>
<li id="nav_about"><a href="index.php?site=about">Contact</a></li>
</ul> 
<script type="text/javascript">
document.getElementById('nav_'+window.location.href.split('=')[1]).className='selected';
</script>

你不应该使用<center>，不推荐使用它！

除了使用javascript编写样式表以匹配元素外，您应该匹配一个类，然后只使用javascript将该类添加到元素中。

我对你的代码不太了解：

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search

它给了我""，但我从未在锚点上看到.search ...如果您想获取当前网址，可以window.location.href。

另一点：如果您使用var外部函数（在全局范围内），则创建一个全局变量，该变量不会被删除并使用内存。然后，您可以在不想再使用它时将其删除（var a="dagjhdjgailghkagh";/*code*/;a=null;），或者使用包含代码的自执行函数（闭包）。

修改

抱歉，我不是#nav>selected，而是#nav>.selected。

您可以在此处查看演示：http://jsfiddle.net/VhWHp/

（但网址没有=，因此我手动将其替换为“存档”。在您的网站中，删除该行）

是的，它首先加载CSS然后加载导航。但这是CSS和javascript的真正强大之处：如果在加载元素之后将其设置为元素，那么该元素将应用于该类。

编辑2：

问题在于，如果您执行split('=')[1]，结果将类似于"news&action"而不是"news"。

然后，您可以使用我之前写的一个函数：

function sQuery(arg) { if(window.location.search){ var que = window.location.search.substring(1); if(arg=='string'){return que;} que = que.split("&"); if(!arg||arg=='array'){return que;} for(var i=0;i<que.length;i++){ var qvar = que[i].split("="); if(qvar[0]==arg){ return qvar[1]; } } } return false; }

然后，调用这样的函数：sQuery('site')

document.getElementById('nav_'+(sQuery('site')||'index')).className='selected';

如果您想获得sQuery('array')，也可以致电sQuery()或["site=news","action=archive"]，如果需要sQuery('string')，也可以"site=news&action=archive"。如果您不使用它，您可以简化功能：

function sQuery(arg) { if(window.location.search){ var que = window.location.search.substring(1).split("&"); for(var i=0;i<que.length;i++){ var qvar = que[i].split("="); if(qvar[0]==arg){ return qvar[1]; } } } return false; }

使用Javascript创建内联样式表

1 个答案: