javascript - 单击链接将选择乳头移动到选定的 div ID

Question

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

http://www.alexanderlozada.com

为了让用户知道他们当前正在查看什么元素，我想实现一个指向当前所选元素的小三 Angular 形。

例子:

如果不让每个链接都成为一个单独的页面，我怎么能做到这一点呢？

我正在使用的链接示例-(我必须保留当前的 ​​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
    });
});