0

ひひ。ページの先頭に、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にかなり慣れていないので、申し訳ありません;;;

4

1 に答える 1

0

これを試して：

<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.

もう 1 つのポイント:var外部関数 (グローバル スコープ内) を使用すると、グローバル変数が作成されますが、これは削除されず、メモリを使用します。次に、もう使用したくない場合は削除するか ( var a="dagjhdjgailghkagh";/*code*/;a=null;)、コードを含む自己実行関数 (クロージャ) を使用できます。

編集：

申し訳ありませんが、代わり#nav>selectedに#nav>.selected.

ここでデモを見ることができます: http://jsfiddle.net/VhWHp/

(ただし、URL には が含まれていない=ため、手動で「アーカイブ」に置き換えます。サイトでは、その行を削除します)

はい、最初に 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;
}
于 2012-08-31T23:16:29.237 に答える