0

<li>特定の URL にアクセスするたびにアクティブなクラスを追加したいですか?

私のコードは次のようになります。

<ul>
<li>
    <a href="link1">Link1</a>
</li>
<li>
    <a href="link2">Link2</a>
</li>
<li>
    <a href="link3">Link3</a>
</li>
<li>
    <a href="link4">Link4</a>
</li>
<li>
    <a href="link5">Link5</a>
</li>
<li>
    <a href="link6">Link6</a>
</li>
</ul>

www.abc/link1 が URL に存在する場合、最初の li のみがアクティブになり、残りの部分にはクラスがありません。

よろしくお願いします

4

4 に答える 4

4

JavaScriptでそれを行う方法は次のとおりです...

var normalisePath = function(path) { return path.replace(/^\/|\/$/g, ''); },
var path = normalisePath(window.location.pathname),
    li = document.getElementsByTagName('li'),
    i, length, a;

for (i = 0, length = li.length; i < length; i++) {
    a = li[i].getElementsByTagName('a')[0];

    if (normalisePath(a.pathname) == path) {
        li[i].className += ' active';
        break;
    }
}
于 2012-04-18T11:57:07.687 に答える
1

各ページに対応する URL に変数を追加するだけです。

www.abc/link1?link_num=1

それで

switch($_GET[link_num]){
case '1':
    $style1 = 'class=active';
    break;
case '2';
    $style2 = 'class=active';
    break;
etc...
}

それから

<ul>
<li>
<a href="link1?link_num=1" <?=$style1?>>Link1</a>
</li>
<li>
<a href="link2?link_num=1" <?=$style2?>>Link2</a>
</li>
<li>
etc

もっと良い方法があると確信していますが、これでうまくいきます

于 2012-04-18T12:01:54.393 に答える
1

jQuery を使用すると、以下を使用できます。

$("li").addClass("active");

ただし、論理的な部分を開発する必要があります...

編集： ...以下です：

$(function() {
    $("li").removeClass("active");
    var current = window.location.pathname.split('/').pop();
    $('a[href="' + current + '"]').addClass("active");
});
于 2012-04-18T11:56:56.560 に答える
0

小切手

var path = window.location.pathname

そしてそれをあなたのものと比較してくださいli。s hrefが一致するactiveクラスにクラスを追加します。liapath

于 2012-04-18T11:59:12.733 に答える