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

查询

 $(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 回答