網站的活動按鈕突出顯示

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 -->

我不想讓每個頁面上的每個按鈕都是自己的類。 我想使用jQuery，PHP，JavaScript或其他任何使它工作的方法，而不必遍歷每個按鈕並為其提供自己的類。

另外，請注意，我在這里不使用導航欄，僅在使用div。 我找到的每個解決方案都使用導航欄，僅使用div和超鏈接時，我無法使它們正常工作。

我想突出顯示按鈕，或為按鈕上色，等等。與當前活動頁面匹配。

Answer 1

使用jQuery嘗試類似的方法：

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

將.selected添加到CSS並根據需要設置樣式。

這將遍歷菜單項，並將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

<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>

循環閱讀

Answer 3

使用jQuery選擇器和.each函數。 我在這里做了類似的事情jQuery.attr（'src'）replace在FF中不起作用 。

您可以使用類似的腳本來搜索每一個腳本，檢查href值，如果適合，請對div進行一些操作style="color: #FF0000;" 使文字變成紅色或任何您想要/需要的文字。