0

こんにちは、現在のページで強調表示されているアクティブなリンクをナビゲーションに表示するのに助けが必要です。つまり、リンクをクリックして新しいページに移動すると、新しいページが開かれた後にそのリンクが強調表示されるようにしたいと考えています。各ページのアクティブなリンクにクラスを追加することで CSS でこれを処理できますが、多くのページが存在するため、jquery を使用して動的に行うことをお勧めします。

HTML 

  <div class="nav center">
        <ul  id="1stMenu">
            <li><a href="#sub_1" id="cate_1" class="links">MAIN #1</a></li>
            <li><a href="#sub_2" id="cate_2" class="links">MAIN #2</a></li>
            <li><a href="#sub_3" id="cate_3" class="links">MAIN #3</a></li>
            <li><a href="#sub_4" id="cate_4" class="links">MAIN #4</a></li>
        </ul>
    </div>
    <div class="sNav_con">
            <ul class="sNav center divs" id="sub_1">
                <li><a href="/">PLEASE</a></li>
                <li><a href="/">HELP</a></li>                                
                <li><a href="/">ME</a></li>
            </ul>
            <ul  class="sNav center divs" id="sub_2">
                <li><a href="/">PLEASE2</a></li>
                <li><a href="/">HELP2</a></li>                                
                <li><a href="/">ME2</a></li>
            </ul>
            <ul class="sNav center divs"  id="sub_3">
                <li><a href="/">PLEASE3</a></li>
                <li><a href="/">HELP3</a></li>                                
                <li><a href="/">ME3</a></li>
            </ul>
            <ul class="sNav center divs" id="sub_4">
                <li><a href="/">PLEASE4</a></li>
                <li><a href="/">HELP4</a></li>                                
                <li><a href="/">ME4</a></li>
            </ul>
    </div>

CSS

.highlight{}
.highlight a{font-weight:bold;color:#000;text-shadow:0 0 5px #fff;}
.visible{display:block;}

.selected{background-image:url('/images/nav_bg.png');}
.selected a{color:#fafafa;font-weight:bold;font-style:normal;text-shadow:0px -1px 0 #000;}


    .nav{position: relative;margin:0 auto;width:1000px;height:40px;font-size:12px;text-align:center;line-height:40px;*display: inline-block;}
    .nav ul {margin: 0;padding: 0;*margin-left:230px;}
    .nav li {margin: 0 5px 10px 0;adding: 0;list-style: none;display: inline-block;font-weight:400;line-height:40px;*float:left;font-family:Raleway;}
    .nav a {padding: 3px 12px;text-decoration: none;line-height: 100%;font-family:Raleway;color:#fff;}
    .nav a:hover {}
    .nav .current a {border-radius: 5px;font-weight:bold;}
    /* center nav */
    .nav.center ul {text-align:center;margin-top:2px;}
    .sNav_con{width:1000px;height:40px;overflow:hidden;margin:0;padding:0;*position:relative;}
    .sNav {position: relative;margin:0 auto;width:1000px;height:40px;line-height:40px;font-size:11px;padding:0;}
    .sNav ul {margin: 0;padding: 0;}
    .sNav li {margin:0;padding: 0;list-style: none;text-align:center;width:160px;height:40px;line-height:40px;display: inline-block;*float:left;}
    .sNav ul li:hover {/*background-image:url('../images/nav_bg.png');*/}
    .sNav a {padding: 3px 12px;text-decoration: none;color: #ddd;line-height: 100%;font-family:Raleway;}
    .sNav a:hover {color: #fafafa;}
    .sNav li:hover a {color: #fafafa;}

Jクエリ

 $(document).ready(function()
{
       $('.links').click(function(event){
       $('.sNav').hide();
        event.preventDefault();
        var targetDiv = $($(this).attr('href'));

        $('.links').removeClass("visible");
        if(targetDiv.css("display") == "none")
        {
            $(targetDiv).addClass("visible");
        }

     targetDiv.siblings().hide(); 
     targetDiv.fadeIn('slow');

    });



    $(document).ready(function() {

    current_page = document.location.href;

    if (current_page.match(/cate_no=1/)){
    $("ul#1stMenu li:eq(0)").addClass('highlight');
    }else  if (current_page.match(/cate_no=2/)){
    $("ul#1stMenu li:eq(1)").addClass('highlight');
    }else if (current_page.match(/cate_no=3/)){
    $("ul#1stMenu li:eq(2)").addClass('highlight');
    }else if (current_page.match(/cate_no=4/)){
    $("ul#1stMenu li:eq(4)").addClass('highlight');
    }else if (current_expage.match(/cate_no=5/)){
    $("ul#1stMenu li:eq(3)").addClass('highlight');
    }else{ // don't mark any nav links as selected
    $("ul#1stMenu li").removeClass('highlight');};
    }); 


    $(document).ready(function() {

    // store url for current page as global variable
    current_page = document.location.href

    // apply selected states depending on current page
    if (current_page.match(/cate_no=11/)) {
    $("ul#sub_1 li:eq(0)").addClass('selected');
    } else if (current_page.match(/cate_no=12/)) {
    $("ul#sub_1 li:eq(1)").addClass('selected');
    } else if (current_page.match(/cate_no=13/)) {
    $("ul#sub_1 li:eq(2)").addClass('selected');
    } else if (current_page.match(/cate_no=14/)) {
    $("ul#sub_1 li:eq(3)").addClass('selected');
    } else if (current_page.match(/cate_no=15/)) {
    $("ul#sub_1 li:eq(4)").addClass('selected');
    } else if (current_page.match(/cate_no=16/)) {
    $("ul#sub_1 li:eq(5)").addClass('selected');
    } else { // don't mark any nav links as selected
    $("ul#sub_1 li").removeClass('selected');
    };});


});
4

1 に答える 1

0

クラスを追加したい場合もありますが、jQuery を使用してプログラムで行いましょう (サイドバー: HTML ID は数字で始めることはできません)。

ハッシュ変更リンクは、ページをリロードしないため、クリックするだけで実行できます。

$('#first-menu').on('click', 'a', function(e){ // NOTE: "1st-menu" != valid ID
    $(this).parent().addClass('highlight')
        .siblings().removeClass('highlight');
});

他のメニュー項目はlocation.pathnameと比較する必要があります(サイドバー #2: sNav_con は一度しか使用されないため、ID にする必要があります。ID は、 jQuery のセレクター エンジンを使用するクラスよりもはるかに高速に検索できます)。

$('#sNav_con').find('a').each(function(){ // sNav_con as an an ID
    if ( $(this).attr('href') == window.location.pathname )
        $(this).addClass('highlight');
});
于 2013-05-19T21:14:54.293 に答える