活动链接(css?)

时间:2013-01-29 14:32:31

标签: javascript css

我遇到了CSS的问题。通常我可以做对,但现在它不适合我。

获得菜单代码

<nav>
    <ul class="ca-menua">
        <li class="home"><a href="#home" id="1" class="tooltip"><div class="ca-icona">O</div><span>Home</span></a>
        </li>
        <li class="info"><a href="#info" id="2" class="tooltip"><div class="ca-icona">e</div><span>Info</span></a>
        </li>
        <li class="komp"><a href="#komp" id="3" class="tooltip"><div class="ca-icona">S</div><span>Kompetencer</span></a>
        </li>
        <li class="cases"><a href="#cases" id="4" class="tooltip"><div class="ca-icona">F</div><span>Cases</span></a>
        </li>
        <li class="kontakt"><a href="#kont" id="5" class="tooltip"><div class="ca-icona">@</div><span>Kontakt</span></a>
        </li>
    </ul>
</nav>

我已经获得了添加活动类的javascript。

<script type="text/javascript">      
    $(document).ready(function(){
        $('.home a.tooltip').addClass('active');
    });
</script> 

<script type="text/javascript"> 
$(function() {
    $('a.tooltip').click(function(e) {
        var $this = $(this);
        $("#nav").load($this.attr('href'));
        $('a.tooltip').removeClass('active');
        $(this).addClass('active');

        // prevent default link click
        e.preventDefault();
    })
});
</script> 

这很好用,并添加了类,但我无法正确使用CSS!

我需要一些关于概率的帮助。小问题。 网站链接为:HERE

CSS:

a.tooltop.active{
    color: #f3cb12;
    font-size: 50px;
}

1 个答案:

答案 0 :(得分:1)

只需将div部分添加到a.tooltip.active选择器中即可获得以下内容:

a.tooltip.active div {
    color: #F3CB12;
    font-size: 50px;
}

我假设您尝试将图标放大并突出显示菜单项是否处于活动状态。问题是它不是应该获得新样式的锚,而是子div元素。