在链接点击时将选择接头移动到选定的div ID

Question

我正在一个网站上工作，该网站在同一页面上有许多链接：

http://www.alexanderlozada.com

为了让用户知道他们当前正在查看的项目，我想实现一个指向当前所选项目的小三角形。

示例：

如果不将每个链接设为单独的页面，我怎么能这样做呢？

我正在使用的链接示例 - （我必须保留当前的href和rel）

<a class="grey show_hide" href="#" rel="#projects" >   
PROJECTS
</a>

Answer 1

在大多数情况下，这是通过使用伪元素:before和/或:after来完成的（read full article）

CSS：

/* creates triangle */
.selected:after {
   content:"";
   display:block; /* reduce the damage in FF3.0 */
   position:absolute;
   bottom:-2px;
   left:50%;
   width:0;
   margin-left:-10px;
   border-width:0px 15px 15px;
   border-style:solid;
   border-color:white transparent;
} 


div.links {
    display: inline-block;
    position:relative; // you must have this to position the triangle propery
    width: 25%;
    height: 45px; // adjust height to fit the menu
    float: left;
    text-align: center;
    font-size: 24px;
    padding-top: 10px;
}

jQuery的：

$(function(){
    $('.show_hide').click(function(){
        $('div.links').removeClass('selected'); // remove all other 'selected' links
        $(this).parent().addClass('selected'); // sets the current .links to be selected
    });
});

Answer 2

在您的

中添加有效课程

<a class="btn active">menu link</a>

css：

.btn.active { background:url(cursor-active.png) bottom center no-repeat; }

是：

    $('.btn').click(function(){
        $('.btn').removeClass('active'); 
        $(this).addClass('active');
    });

您可以在此处看到：FIDDLE