<script type="text/javascript">
$(document).ready(function(){
$('#info a.tooltip').addClass('active');
});
</script>
<ul class="ca-menua">
<li><a href="#home" class="tooltip"><span class="ca-icona">O</span></a></li>
<li><a href="#info" class="tooltip"><span class="ca-icona" id="info">e</span></a></li>
<li><a href="#komp" class="tooltip"><span class="ca-icona">S</span></a></li>
<li><a href="#cases" class="tooltip"><span class="ca-icona">F</span></a></li>
<li><a href="#kont" class="tooltip"><span class="ca-icona">@</span></a></li>
</ul>
a.tooltip.active #info {
color: #f3cb12;
font-size: 50px;
}
我正在尝试做一个主动链接效果,但我似乎无法做到正确。效果在此链接上(来自第 2 页,而不是首页)单击此处查看网站。
“活动功能不起作用。当您在特定页面时,该页面的导航项应该处于活动状态......现在它不起作用。 - 这样你就可以看到你在哪里。”
Javascript:
<script type="text/javascript">
$(function() {
$('a.tooltip').click(function(e) {
var $this = $(this);
$(".ca-menua").load($this.attr('href'));
$('a.tooltip').removeClass('active');
$(this).addClass('active');
// prevent default link click
e.preventDefault();
})
});</script>
HTML:
<ul class="ca-menua">
<li><a href="#home" class="tooltip"><span class="ca-icona">O</span></a></li>
<li><a href="#info" class="tooltip"><span class="ca-icona">e</span></a></li>
<li><a href="#komp" class="tooltip"><span class="ca-icona">S</span></a></li>
<li><a href="#cases" class="tooltip"><span class="ca-icona">F</span></a></li>
<li><a href="#kont" class="tooltip"><span class="ca-icona">@</span></a></li>
</ul>
CSS:
li a.tooltip.active .ca-icon {
color: #f3cb12;
font-size: 50px;
}
谢谢 :-)