PHP：_POSTとCSS、アクティブなリンクを表示する方法

Question

私はPHPで構築しているサイトを持ち、mySQLから動的にデータを読み込むページを持っています。ユーザーがクリックしたリスト項目を使用するため、データベースに_POSTが発生するため、現在見ているページのCSSをカスタマイズすることができません。ハイライトするためにクリックした<li>のCSSクラスを動的に設定する方法があるのだろうかと思います。問題は、別のリストアイテムを押すと、古いアイテムを強調表示しなくてはならないということです。誰でもこれについて最善の方法を入力していますか？

Answer 1

（私はあなたが邪魔にならないようにAJAXの一部をすでに持っていると仮定するつもりです）このような何かを追加し、あなたがAJAX経由でPOSTリクエストを送信していると仮定すると、

// var context is a previously identified container for the list items 

var items = context.getElementsByTagName('li'); 
for (var i = 0; i < items.length; i++) { 
    items[i].addEventListener('click', function() { 
     // do AJAX stuff 

     // remove the "highlight" class from all list items 
     for (var j = 0; j < items.length; j++) { 
      var classname = items[j].className; 
      items[j].className = classname.replace(/\bhighlight-class-name\b/i, ''); 
     } 

     // set the "highlight" class on the clicked item 
     this.className += ' highlight-class-name'; 
    }, false); 
} 

ここでデモ - http://jsfiddle.net/jYdMB/

Answer 2

あなたはAjaxを使用しているようです。 JSスクリプトがこれを行います。ここでは、すぐにクリックが受信されると私は見て

これらLISにクリックイベントをバインドするために固有のID

使用jqueryの/プロトタイプ/ XYZツールキットとLISを作成し、私はJS

に

• これを試みる方法ですイベントターゲットでクラス名を設定またはリセットしようとしました。

この例は、jQueryで詳しく説明します。

Answer 3

jQueryの答え：http://jsfiddle.net/qYUAz/

<style type="text/css"> 
#myNav .active{ 
    color:red; 
    font-weight:bold; 
} 
</style> 


<ul id="myNav"> 
    <li><a href="#1">link 1</a></li> 
    <li><a href="#2">link 2</a></li> 
    <li><a href="#3">link 3</a></li> 
</ul> 

<script type="text/javascript"> 
$('#myNav a').click(function(){ 
    $('#myNav a').removeClass('active'); 
    $(this).addClass('active');  
}); 
</script>