2

だから私はヘッダーに内部スタイルシートを作成するためにjavascriptを使用しようとしていますが、うまくいきません。このスクリプトのこのポイントは、現在表示しているページのタブを強調表示することです。

以下は、私が実装している実際のサイトではなく、テストしているだけですが、正しく機能していません。これは可能ですか？はい、インラインCSSなどでできることはわかっていますが、それはもっと混乱するでしょう!

<html>
<head>
<title>Test</title>
<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));

text.innerHTML('<style type="text/css">
."nav_"' + page + '" {background-color:red;} {color=green;} </style>')

}
</style>"

</script>
</head>
<body>
<ul>
<li class="nav_home"><a href="testtest.html?site=home">Home</a>
<li class="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li class="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li class="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
</body>
</html>
4

2 に答える 2

4
  1. parseURLDOM 要素を返します。
  2. page = parseUrl('').searchparseUrl('')が文字列を返す場合、文字列 method を返しますsearchが、それ自体はあまり役に立ちません。
  3. var site=getSecondPart(page));余分な括弧があります。
  4. text定義されていません。
  5. のよう."nav_"4なクラスは有効なクラスではありません。
  6. 余分な閉じブレースがあります。

これらのエラーはすべて、コードの実行を妨げます。構文エラーが発生しないようにするために使用するのに適したツールは、Chrome の Web Developer、Firefox の Firebug、またはJSHintです。

それが完了したら、次のようにします。

var style = document.createElement("style");
style.innerHTML = ".nav_" + page + " { background-color: red; color: green; }";
document.body.appendChild(style);
于 2012-08-31T15:19:40.063 に答える
1

あなたが求めているものではなく、あなたの問題を解決する2つの適切な解決策があります。

最初の方法は、各 で個別の nav クラスを使用することliです。それはあなたがずっとしてきたことです。

好ましい方法：

<li class="nav" id="home"> ...

代わりにこれを行うこともできますが、家liはユニークであるため、お勧めできません。

<li class="nav nav-home"> ...

と

li.nav {
    background-color: red;
    color: green;
}

2 番目の方法は、CSS3 属性セレクターを使用することです。ただし、これはすべてのブラウザーで機能するとは限りません。

li[class^="nav"] {
    background-color: red;
    color: green;
}
于 2012-08-31T15:26:57.863 に答える