Javascript 正在为网站突出显示活动按钮

我不想让每个页面上的每个按钮都是自己的类。我想使用jQuery、PHP、JavaScript或任何它需要的东西来让它工作，而不必遍历每个按钮并给它自己的类

另外，请注意我这里没有使用导航栏，我只使用div。我找到的每个解决方案都使用导航栏，如果只使用div和超链接，我就无法让它们工作

我想把按钮高亮显示，或者给它上色等等。。与当前活动页面相匹配。

<!-- 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尝试以下操作：

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

将

.selected

添加到CSS中，并根据需要设置样式

这将遍历菜单项，并将

href

属性中的url与当前活动页面url进行比较

您还可以使用

菜单内的
divs
：

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

使用jQuery选择器和.each函数。我在这里也做过类似的事情

您可以使用类似的脚本来搜索每一个，检查href值，如果它适合您，请使用div。。。比如内联添加样式属性，比如
style=“color:#FF0000；”
将文本变成红色或您想要/需要的任何内容。
为什么链接列表用div而不是list marku标记？您有问题吗？是的，您有问题吗？是的，对不起，我想突出显示与用户正在使用的页面相关的活动按钮。不幸的是，我没有做这些按钮，也无法控制它们的编写方式。因此，在我的菜单的开始div下面添加这些按钮？这是一个循环，将创建10个具有自己ID和部分的按钮。按钮以这种方式编写的主要原因是因为我们有一个CMS，用户可以复制这些按钮并进行编辑他们自己的。我不想改变这些按钮的编写方式，我只想在有人在页面上查找按钮时突出显示它们，而不给每个按钮指定它们自己的类。这将避免CMS上的编辑给每个按钮一个类（与老年人一起工作，因此解决方案必须对他们简单）。这看起来是一个很好的解决方案。遗憾的是，我不能让它工作，但我不知道为什么。我已经把剧本放进书包里了。已将.selected类添加到我的css中，但它仍然不起作用。还尝试了#菜单。选择了…仍然没有！！您是否将jQuery包含在此脚本上方的页面中？你可以添加完整的HTML页面，这样我就可以检查了。这段代码应该很好用。谢谢你的编辑，看起来很酷。我可以添加整个页面的html，在哪里最好？我还搜索了include jquery，但找不到正确的行。你知道吗？我需要添加jquery引擎来让我的网站与jquery一起工作吗？找到它：）我已经将div.repeatable添加到选择器中，应该可以工作了。此外，如果可能，将.selected添加到CSS文件的末尾。我看到还有一些其他特定于菜单的CSS
$(document).ready(function(){
    $('#menu div.repeatable').each(function(){
        if(document.URL.indexOf($(this).find('a').attr('href')) !== -1){
            $(this).addClass('selected');               
        }
    });
});