嗨我试图在页面的开头创建一个内联样式表,该样式表对我从URL中获取的内容做出反应。我这样做是为了让我可以突出显示页面上的导航按钮。有点像这里的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很了解,很抱歉;;
最佳答案
尝试这个:
<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
...如果要获取当前URL,可以执行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;
}