0

次のチュートリアルを使用して、1 ページの Web サイトを作成しています: 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

強調表示したいリンクに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 に答える
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>

その後、タブ要素をクリック関数にバインドして、タブが選択されるたびにイベントを発生させる必要があります。

$(".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 に答える