0

我有一个页面，其中有很多设置为 100% 宽度的大图像。导航会将您带到每个单独的图像。我希望与焦点所在的 div 相关联的链接的背景可以更改颜色，因为它已滚动到或单击了链接。

html:

<!------ Start Header Wrapper ------>
<div class="HeadWrapper">
    <!------ Start Head ------>
    <div class="Head">
        <!------ Logo Box ------>
        <div class="Logo">
            <a href="#LBHome"><img src="_images/nav/PrimalLogo.jpg" /></a>
        </div>

        <!------ Navigation links when in mobile all links except shop will go under a menu icon. ------>
        <div class="NavSpan">
            <a href="#LBHelix">Helix</a>
            <a href="#LBOriginals">Originals</a>
            <a href="#LBBlackLabel">Black Label</a>
            <a href="#LBMilitary">Military</a>
            <a href="#LBBandR">Beer & Rock</a>
            <a href="#LBCustom">Custom</a>
            <a href="#LBCommunity">Community</a>
        </div>


        <div class="clear"></div>
    </div>
    <!------ End Head ------>

    <!------ Transparent BG ------>
    <div class="HeaderBG"></div>

</div> 
<!------ End Header Wrapper ------>   


<!------ Start Images ------>
<div id="LBHome">
    <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBMHelix">
    <img src="_images/bodyImages/02_Lookbook.jpg" />
</div>
<div id="LBWHelix" class="theme-default">
    <div id="slider" class="nivoSlide">
        <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
        <img src="_images/bodyImages/02_Lookbook.jpg" />
        <img src="_images/bodyImages/03_Helix_V2.jpg" />
    </div>
</div>
<div id="LBMOriginals">
    <img src="_images/bodyImages/03_Helix_V2.jpg" />
</div>
<div id="LBWOriginals">
    <img src="_images/bodyImages/04_LB_Helix.jpg" />
</div>
<div id="LBBlackLabel">
    <img src="_images/bodyImages/05_LB_Helix.jpg" />
</div>
<div id="LBMilitary">
    <img src="_images/bodyImages/06_WMS-Helix.jpg" />
</div>
<div id="LBBandR">
    <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCustom">
    <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>
<div id="LBCommunity">
    <img src="_images/bodyImages/01_LB_MtEvansRDSky.jpg" />
</div>

CSS：

body {
    line-height: 1;
    background:#1e1e1e;
}
* {
    margin:0 auto!important;
    padding:0 auto!important;
}
img {
    width:100%;
    border: none;
}
a {
    font-family:Helvetica, Arial, sans-serif !important;
    font-size:13px;
    line-height:18px;
    color:#B70809;
}
a:link, a:visited {
    color:#b70809;
    text-decoration:none;
    outline:none;
    outline-width:0;
    border-width:0;
}
a:hover, a:active {
    color:#7c7c7c;
}
/*------------------------------------*\
Header
\*------------------------------------*/
.HeadWrapper {
    width:100%;
    height:80px;
    z-index:100;
    clear:both;
    position:fixed;
    border-bottom:1px #1e1e1e solid;
    top:0;
    left:0;
}
.HeaderBG {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:80px;
    background-color:#1e1e1e;
    z-index:101;
    /* These three lines are for transparency in all browsers. */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity:.7;
}
.Head {
    position:relative;
    width:1000px;
    height:80px;
    z-index:105;
    display:block;
}
.Logo {
    width:86px;
    float:left;
}
/*------------------------------------*\
NAV 
\*------------------------------------*/
.NavSpan {
    float:left;
}
.NavSpan a {
    font-family:Helvetica, Arial, sans-serif !important;
    font-size:14px;
    line-height:18px;
    color:#FFFFFF;
    text-transform:uppercase;
    line-height:80px;
    margin-left:40px !important;
    letter-spacing:1px;
}
.NavSpan a:focus {
    background:#b70809;
}
.NavSpan a:active {
    background:#b70809;
}

:focus我试着用or:active标签来做。我知道我可以用 JavaScript 做很多事情，但如果可能的话，我试图省略任何 JavaScript。我希望当用户向下滚动页面时，导航项下的红色框会随着他们所在的部分移动。我知道我可以使用视差滚动条或通过获取窗口位置并设置在某些位置发生的动作来做到这一点。 '不确定是否有更简单的方法可以做到这一点。

4

1 回答 1

1

试试这个功能。background-color单击图像时，它将更改 div 的 CSS ，您可以将其更改为任何内容！

$('document').ready(function () {
  $('img').click(function () {
    $('div').css('background-color', '#hexcode');
  });
});

请记住：首先向我们展示您的代码！告诉我们您在做什么以及出了什么问题。我们会帮助你。相反，这些家伙会否决你，伙计。尝试在下一个问题中记住这一点，因为这不是一个自由职业者网站。它是一个问答网站，你问我们告诉了什么问题！事情就是这样。另外，我想建议你去这个网站学习一些 jQuery。jQuery.com。你需要磨练你的 JavaScript 天赋！:)

于 2013-09-10T16:31:42.253 回答