正在为网站加亮的活动按钮

<!-- 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和超链接时，我无法让它们工作。

我想高亮按钮，或为它着色等等，它与当前活动页面相匹配。

来源

2012-01-27 John Vasiliou

为什么你的链接列表用div来代替list marku？你有问题吗？ – Quentin 2012-01-27 16:11:28

是的，你有问题吗？ – 2012-01-27 16:12:28

对不起，我想突出显示与用户正在使用的页面相关的活动按钮。我没有做这些按钮，不能控制它们被写的方式。 – 2012-01-27 16:13:20

<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

来源

2012-01-27 16:18:44

那么在我的菜单的开放div下方添加一下？ – 2012-01-27 16:20:53

这是一个循环，将创建10个按钮与他们自己的ID和部分 – 2012-01-27 16:21:33

按钮被写入这种方式的主要原因是因为我们有一个CMS，用户可以复制这些按钮，并使自己的。我不想改变这些按钮的编写方式，我只是想在某人在该按钮的页面上时突出显示他们，而不必为每个按钮提供他们自己的类。这将为CMS的编辑们节省每个按钮一个类（与老年人一起工作，因此解决方案对他们来说很简单）。 – 2012-01-27 16:23:49

尝试像这样使用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进行比较。

您还可以使用divs内#menu：

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

来源

2012-01-27 16:34:35 SeanNieuwoudt

这看起来像一个很好的解决方案。可悲的是我无法让它工作，但我不知道为什么。我已将脚本放入。添加.selected类到我的CSS，但它仍然无法正常工作。还尝试过#menu。选中...仍然没有任何东西！ – 2012-01-27 16:45:23

你在这个脚本的上面在页面中包含了jQuery吗？你可以添加整页HTML，以便我可以检查。该代码应该工作得很好。 – SeanNieuwoudt 2012-01-27 16:49:45

感谢编辑，这似乎很酷。我可以添加完整的页面html，哪里最好这样做？我也搜索包括jquery，但无法找到正确的路线。你知道吗？是否需要添加一个jQuery引擎才能使我的网站适用于jquery？ – 2012-01-27 16:56:05

使用jQuery选择和。每个功能。我在这里做了类似的东西jQuery.attr('src') replace not working in FF。

您可以使用类似的脚本来搜索每一个，检查href值，如果它适合你，使用div做些什么...就像添加一个样式属性内联，如style="color: #FF0000;"使文本变红或任何你想/需要。

来源

2012-01-27 16:35:39 Michal

正在为网站加亮的活动按钮

回答

相关问题