javascript - 单击链接时更改内部锚标记 css

Question

我有一个导航栏，其中包含链接到页面某些部分的标签列表。

我想知道是否可以通过javascript或css在单击链接并显示内容时更改链接的不透明度，当单击下一个列表项将更改为活动不透明度并且旧链接将更改恢复正常。

这是页面和底部导航栏的工作测试： http ://www.luvly.co.nz/space/process.html

Answer 1

你可以通过像这样使用伪类来做到:active这:hover一点

#Navigation a:active
{
    opacity: 0.9;
}
#Navigation a:hover 
{ 
    opacity:0.4
}

这是一个示例，因此请根据您的代码放置这些类。

Answer 2

在您的js/process-slider.js 中添加以下行：

$('a.panel').click(function () {

    $('.selected').css('opacity','1'); /* this one - the normal state*/
    $('a.panel').removeClass('selected');
    $(this).addClass('selected');

    current = $(this);

    $('#wrapper').scrollTo($(this).attr('href'), 800);
    $('.selected').css('opacity','0.5'); /* and this one - the clicked state*/      

    return false;
});

注意：将 0.5 更改为您想要的任何数字 (0 < x < 1)。

Answer 3

通过 CSS，您可以执行类似的操作，只需将下面的不透明度值更改为您想要的值，因为您尚未提及任何特定的不透明度设置......

#process-nav-bar .panel:active {
opacity: 0.5;
}

#process-nav-bar .panel:hover {
opacity: 0.4;
}

#process-nav-bar .panel {
opacity:0.3; 
}