0

我正在使用以下教程创建一个单页网站： 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。

4

3 回答 3

0

您可以尝试Jquery Tabs ...也许更容易

于 2012-10-08T15:07:07.777 回答
0

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

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

之后，您只需将选项卡元素绑定到 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
});

通过这种方式，我们从所有“选项卡”元素中删除颜色，然后将颜色应用于选定的选项卡。

于 2012-10-08T15:22:55.290 回答
0

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

CSS：

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

jQuery：

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

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

于 2012-10-08T15:40:55.187 回答