ウェブサイト用にアクティブなボタンが強調表示されています

Question

<!-- start menu area --> 
<div id="menu" class="editable"> 
<div id="button1" class="repeatable"><a href="/section1.php">Section 1</a></div> 
<div id="button2" class="repeatable"><a href="/section2.php">Section 2</a></div> 
<div id="button3" class="repeatable"><a href="/section3.php">Section 3</a></div> 
</div> 
<!-- end menu area --> 

各ページにすべてのボタンを1つずつ与えたくありません。私は、jQuery、PHP、JavaScriptなどを使用して、すべてのボタンを1つずつ操作せずに自分のクラスにすることができるようにするために必要なものをすべて使用します。

また、ここではナビゲーションバーを使用していません。divは使用しています。私が見つけたすべての解決策はナビゲーションバーを使用しており、divとハイパーリンクだけを使用している場合は動作させることができません。

現在のアクティブなページと一致するボタンを強調表示したり、色付けしたりしたいですか？

$(document).ready(function(){ 
    $('#menu div.repeatable a').each(function(){ 
     if(document.URL.indexOf($(this).attr('href')) !== -1){ 
      $(this).addClass('selected');    
     } 
    }); 
}); 

必要に応じて、あなたのCSSやスタイル、それをする.selectedを追加します。loops

Answer 1

<div id="menu" class="editable"> 
<?php 
$i = 0; 

while($i < 10) 
{ 
echo '<div id="button'.$i.'" class="repeatable"><a href="/section'.$i.'.php">Section '.$i.'</a></div>'; 
$i++; 
} 
?> 
</div> 

はjQueryのを使用して、このような何かを試してみてください。

これはメニュー項目をループし、href属性のURLを現在のアクティブなページのURLと比較します。

また#menu内divsを使用することができます。

$(document).ready(function(){ 
    $('#menu div.repeatable').each(function(){ 
     if(document.URL.indexOf($(this).find('a').attr('href')) !== -1){ 
      $(this).addClass('selected');    
     } 
    }); 
}); 

Answer 2

上に読む

Answer 3

は、jQueryのセレクタと.each関数を使用します。私はここで似たようなことをしていますjQuery.attr('src') replace not working in FF。

同様のスクリプトを使用して、すべてを検索し、hrefの値を確認して、それに合ったらdivで何かを行うことができます...のようなスタイル属性をインラインで追加すると、欲しい/必要がある。