1

御時間ありがとうございます。使用しているナビゲーションバーの「アクティブ」タブを強調表示しようとすると、多くの問題が発生します。CSSを使用してこれを実行しようとしていますが、ページを変更すると問題が発生します。次のコードを追加します。
function updateMenu(num)
{

var menuCode =

'<ul id="menu">' +
'<li><a href="software/menu.php" onclick="updateMenu(1);"';
if(num == 1){menuCode +=' class="current"';}
menuCode += '>Software</a></li>'+
'<li><a href="users/menu.php" onclick="updateMenu(2);"';
if(num == 2){menuCode +=' class="current"';}
menuCode += '>Software</a></li>';

document.getElementById("cssMenu").innerHTML = menuCode;
}

そして私のリストは次のようになります：

<ul id="menu">

<li><a href="software/menu.php" onclick="updateMenu(1);">Software</a></li> <li><a href="user/menu.php" onclick="updateMenu(2);">Users</a></li> </ul>

updateMenu関数にすべてのコードが記述されているため、これは不正な解決策だと感じています。私の問題に対して、より洗練された解決策があるかどうか疑問に思いました。（CSSが正しく機能するように、「class = current」を移動していることがわかります）。

4

1 に答える 1

2

あなたの正確な要件が何であるかわかりません。タブをクリックしても別のページに移動しないと仮定すると、次のコードが役立ちます[ Jqueryを使用してください]：

HTML :

<ul id="menu">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Javascript :

<script>
 $(document).ready(function(){
  $("#menu li").click(function(){
    $("#menu li").removeClass("highlight");
    $(this).addClass("highlight");
 });
});
</script>

CSS :

.highlight {
 background: #f00;
}
于 2012-04-27T17:17:15.960 に答える