Question

我有一个页面，其中许多大图像设置为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或:active标记。我知道我可以用JavaScript做很多事情但是我试图在可能的情况下遗漏任何JavaScript。我希望当用户向下滚动页面时，导航项下的红色框随着它们所在的部分移动。我知道我可以使用视差滚动条或通过获取窗口位置并在某些位置设置动作来实现它确定是否有更简单的方法来做到这一点。

Answer 1

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

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

请记住：首先向我们展示您的代码！告诉我们你在做什么，出了什么问题。我们会帮助你。相反，这些家伙会打赌你的伙伴。请尽量记住下一个问题，因为这不是一个自由职业者网站。它是一个Q＆amp; A网站，你问我们告诉了什么是错的！就是这样。另外，我想建议你去这个网站学习一些jQuery。 jquery.com。你需要优化你的JavaScript才能！：）

更改div焦点的链接背景

1 个答案: