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

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

<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”课程添加到您的家中或开始标签页。

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

3 个答案: