0

こんにちは、そのページにいるときにメニューリンクを赤くしようとしていますが、機能していません。

HTML:

<li><a id="home" onclick="changeClass('home')" href="index.php">Home</a></li>

CSS:

#topMenu li{
    display:inline;
    margin-right:60px;
    font-size:12px;
    font-weight:bold;
    color:#000;
    text-decoration:none;
    }

#topMenu li a{
    color:#000;
    text-decoration:none;
    }

#topMenu li a:hover{
    color:#666;
    text-decoration:underline;
    }

.topMenuon{
    color:#F00
    }

Javascript:

 function changeClass(id)
    {
       var element = document.getElementById(id);
       element.className = element.className + ”topMenuon”;

    }

これを機能させる方法についてのアイデアはありますか?

4

6 に答える 6

1

そのサーバー側でやりたいかもしれませんが、何らかの理由でそれができず、使用できない場合jQuery:

function changeClass (id) {
  var el = document.getElementById(id);
  if (el.href == location.pathname) el.className += 'topMenuon';
};
于 2012-09-04T09:29:01.330 に答える
1

Jquery をインクルードして次のようにする方が簡単です。

$('#home').on('click',function(){

   $(this).addClass('topmenuon');

});

ただし、別のページに移動する場合は、そのようには機能しません。javascript/jquery で何らかの方法で現在のページを検出し (URL で何かを使用するか、セクション タイトルなどのページの識別子を使用して)、そのページにいる間にクラスを追加する必要があります (または、サーバーを実行します)。サーバーが直接レンダリングする場合は、まったく呼び出さないでください)。とにかくページを離れる場合、そのような onclick を使用することはできません。新しいページは、ajax ではなく完全なポストバックを行っているかどうかを知る方法がありません!

于 2012-09-04T09:24:12.593 に答える
0 
function changeClass()
        {
            var element = document.getElementById('home');
            element.className += 'topMenuon';
        } 


<li><a id="home" onclick="changeClass();" href="#">Home</a></li>
于 2012-09-04T09:34:13.910 に答える
0

プレーンjs

window.onload = function(){
   document.getElementById("home").onclick = function(){
      this.className +=" topMenuon" ;
   }
}

編集

リンクをクリックすると、おそらく新しいページに移動します。したがって、新しいページにいるため、上記のコードはリンクのクラスを変更しません。

phpを使用してクラスをリンクに追加する必要がある場合があります（使用していると思います）。

于 2012-09-04T09:30:00.070 に答える
0

jquery を使用 - これは<head>...

 <script src="yourPath/jquery_1.8.0_min.js" type="text/javascript"></script>

それから...

 $(document).ready(function(){

   $("#home").addClass('topMenuon');

 }

それはそれを行うでしょう...

S

于 2012-09-04T09:25:00.510 に答える
0

として適用

var element = document.getElementById('home');  
        element.setAttribute("className", newClass);
于 2012-09-04T09:31:16.423 に答える