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属性中的网址与当前活动网页网址进行比较。

您还可以使用divs内的#menu：

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

阅读loops

Answer 3

使用jQuery选择器和.each函数。我在这里做了类似的事情jQuery.attr('src') replace not working in FF。

您可以使用类似的脚本搜索每一个，检查href值以及它是否适合您，使用div执行某些操作...就像添加样式属性内联一样，如style="color: #FF0000;"使文本变为红色或者你想要/需要什么。

为网站突出显示活动按钮

3 个答案: