导航菜单指示用户所在的位置

Question

我的页面上有一个菜单,有4个不同的区域,一个人可以导航到:

Home
About
Contact
Privacy

我希望当用户点击其中一个链接时,我会在菜单中看到它的指示.所以如果用户点击"关于",他会看到

Home
-->About
Contact
Privacy

我正在使用带有jquery的ol来填充页面的另一部分,其中包含与被点击主题相关的数据.

我的HTML:

 <div class='home'><a href='#' class='navigate' id='home'><ol>Home</ol></a></div>
 <div class='about'><a href='#' class='navigate' id='about'><ol>About</ol></a></div>
 <div class='contact'><a href='#' class='navigate' id='contact'><ol>Contact</ol></a></div>
 <div class='privacy'><a href='#' class='navigate' id='privacy'><ol>Privacy</ol></a></div>

导航类:

 $('.navigate').click (function() {

 //Show a animiated gif
 $('#loading').show();

 //id of module        
    var module = $(this).attr('id');

 //get id of modules a href id
            var childId = $("."+module).children("a").attr("id");

 //add --> to the div
            $('.'+$(this).attr('id')).html("-->"+childId);

 //post to navigate.php and do stuff.
            $.ajax({
                   type: "POST",
                   url: "navigate.php",
                   data: "module="+module,
                   success: function(result)
                   {
                            $('#mainBody').html(result);
                            $('#loading').hide();
                   }
                    })
    })      
    });

通过这种尝试,我能够在正确的ol中获得" - >",但是,我无法移除其他人并丢失href链接.显然,当我想出这个时,我将用一个很酷的小箭头图像替换 - >.

这是我的小提琴:http: //jsfiddle.net/Q4H2k/1/

Answer 1

怎么样的:

JS

$('.navigate').removeClass('active'); // Remove active from all elements in the menu
$(this).addClass('active'); // Add active class to the element being clicked

CSS

.active:before {
   content: "---> "; // Apply styling for the active element here
}

Imo,通过给它一个类来指示活动的menu元素是"更干净".这样你就可以简单地删除类而不必乱用inner-html.您还可以更好地控制样式的方式.如果你想要其他东西,--->你可以设计一种特殊颜色,子弹或其他东西.看看其他网站是如何做到的.