我在一个网站上工作,该网站在同一页面上有许多链接:
http://www.alexanderlozada.com
为了让用户知道他们当前正在查看什么元素,我想实现一个指向当前所选元素的小三 Angular 形。
例子:
如果不让每个链接都成为一个单独的页面,我怎么能做到这一点呢?
我正在使用的链接示例-(我必须保留当前的 href 和 rel)
<a class="grey show_hide" href="#" rel="#projects" >
PROJECTS
</a>
最佳答案
在大多数情况下,这是通过使用伪元素 :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
});
});
关于javascript - 单击链接将选择乳头移动到选定的 div ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17775733/