是否根据所选锚点突出显示菜单项？

Question

我正在使用以下教程创建一个单页面网站：http://www.insitedesignlab.com/how-to-make-a-single-page-website/

是否可以根据所选择的锚点更改菜单项的颜色？

这就是我设置菜单的方式

        <?php $current = $post->ID; $counter = 1; $mypages = get_pages(array('sort_column' => 'menu_order'));
            foreach( $mypages as $page ) { ?>
            <?php if ($current == $page->ID) { ?>
                <li><a style="color:white!IMPORTANT;" id="menu<?php echo $counter; ?>" href="#section<?php echo $counter; ?>"><?php echo $page->post_title; ?></a></li>
            <?php } else { ?>
                <li><a id="menu<?php echo $counter; ?>" href="#section<?php echo $counter; ?>"><?php echo $page->post_title; ?></a></li>
            <?php } ?>
        <?php $counter++; } ?>

因此，每个菜单在每次循环时都会迭代1。

Answer 1

你可以试试Jquery Tabs...也许这样更简单

Answer 2

当然，我认为正确的方法是绑定标签，我的意思是不依赖于锚点，所以每次点击标签都会改变，所以首先你必须像这样向所有标签添加一个类：

<li><a style="color:white!IMPORTANT;" id="menu<?php echo $counter; ?>" class="tab" href="#section<?php echo $counter; ?>"><?php echo $page->post_title; ?></a></li>

之后，您只需将tab元素绑定到click函数，以便在每次选择选项卡时触发事件：

$(".tab").click(function(e){
     $(".tab").css("color", ""); //Remove the color from all tabs
     $(this).css("color", "white!IMPORTANT"); //Apply the "highlight" color to the selected
});

这样，我们从所有" tab“元素中删除颜色，然后将该颜色应用于选定的选项卡。

Answer 3

如果对要突出显示的链接使用css类，效果会更好。

CSS：

.linkactive{
color:pink;
font-weight:bold;
}

jQuery：

$("#nav a").click(){
  $(".linkactive").removeClass("linkactive");
  $(this).addClass("linkactive");
});

请记住将"linkactive“类添加到您的主页或开始选项卡中。