Question

我的页面上有一个导航栏，位于www.ssangar.com，您可以看到，当图标变为白色并且文本标签滚动时。该页面是单页面布局网站，因此使用锚点，但我试图使其成为当用户点击导航栏或滚动到下一部分时，该图标保持突出显示。我目前有这个jquery代码，我的知识非常先进，但现在点击，背景图像变为白色图标。

使用Javascript：

$('.nav a').click(function(e){
var elem = $(this).find('li')
var className = elem.attr('class');
var iconName = className.substring(0, className.length - 4);
elem.css('background-image', 'url("Icons/' + iconName + '_hl.png")');
});

和CSS：

    .navtext,
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    text-align: center;
    -webkit-transform: translateX(-240px);
    -ms-transform: translateX(-240px);
    transform: translateX(-240px);
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    z-index:-1;
}

.nav a:hover .navtext {
    clip: auto;
    height: 30px;
    width: 90px;
    margin-top: 10px;
    overflow: visible;
    padding: .25em .25em;
    color: #fff;
    text-align: center;
    background-color: rgba(40, 40, 40, .7);;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    z-index: -1;
    overflow: visible;
    -webkit-transform: translateX(30%);
    -ms-transform: translateX(30%);
    transform: translateX(30%);
}

.nav ul li {
    height: 50px;
    margin-top: 2px;
    background-repeat:no-repeat;
    background-size:75%;
    background-position:center; 
    line-height:30px;
}

.nav li.home_ico{
    background-image: url('Icons/home.png');
}

.nav li.home_ico:hover{
    background-image: url('Icons/home_hl.png');
}
.nav li.about_ico{
    background-image: url('Icons/about.png');
}

.nav li.about_ico:hover{
    background-image: url('Icons/about_hl.png');
}
.nav li.about_ico:active{
    background-image: url('Icons/about_hl.png');
}

.nav  li.team_ico{
    background-image: url('Icons/team.png');
}

.nav  li.team_ico:hover{
    background-image: url('Icons/team_hl.png');
}

.nav  li.process_ico{
    background-image: url('Icons/process.png');
}

.nav  li.process_ico:hover{
    background-image: url('Icons/process_hl.png');
}

.nav  li.progress_ico{
    background-image: url('Icons/progress.png');
}

.nav  li.progress_ico:hover{
    background-image: url('Icons/progress+hl.png');
}

.nav li.extras_ico{
    background-image: url('Icons/extras.png');
}

.nav li.extras_ico:hover{
    background-image: url('Icons/extras_hl.png');
}

.nav li.sponsorus_ico{
    background-image: url('Icons/sponsorus.png');
}

.nav li.sponsorus_ico:hover{
    background-image: url('Icons/sponsorus_hl.png');
}

.nav li.sponsors_ico{
    background-image: url('Icons/sponsors.png');
}

.nav li.sponsors_ico:hover{
    background-image: url('Icons/sponsors_hl.png');
}

感谢。

CSS / JQuery：单击导航图标更改

0 个答案: