javascript - 如何使多个内联图像响应？

Question

我是这个网站和一般网络开发的新手，但我正在做一个元素，需要一些帮助。请耐心等待，因为我对此还是个新手，所以我知道我的代码很草率而且可能效率低下。

我正在制作一个粘性标题，当您向下滚动页面时它会保持可见。此外，当您单击链接时，我希望它们被突出显示，然后通过滚动操作移动到页面上的特定位置。当您点击 1 时，它应该突出显示，其他应该变灰。

因为我使用独特的形状来做到这一点，所以我只使用了图像。我不知道更好，所以如果你有建议，我将不胜感激。但是，这不是我向大家提问的重点。我已经想出如何利用此处关于堆栈溢出的知识库来使 header 工作。但是，我需要优化该元素，使其能够响应较小的视口(viewport)。鉴于我有多个 div、图像和脚本，我不确定如何执行此操作。每次我尝试完成此操作时，我都会破坏 header 功能的其他方面。任何帮助或指导将不胜感激。我什至不知道从哪里开始。

JSFiddle Demo

$(document).ready(function() {
  $('div[id^="section"]').on('click', function() {
    $('div[id^="section"]').addClass('not-active');
    $(this).removeClass('not-active');
  });
});


var $window = $(window),
       $stickyEl = $('.fusion-page-title-bar'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });


$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top - 225
            }, 1000);
            return false;
        }
    }
});

.fusion-page-title-bar {
        background-color: rgba(77,77,77,0.6) !important;
    z-index: 9999 !important;
    position: sticky !important;
    position: -webkit-sticky !important;
    position: -moz-sticky !important;
    position: -ms-sticky !important;
    position: -o-sticky !important;
    top: 135px !important;
    height: 71px;
    border: none;
}
}

.fusion-page-title-bar.sticky{

position: fixed;
     top: 0;
     }

#main{padding-top:0px !important;}

.stickybanner {
  height: 71px;
  text-align:center !important;
  width:1596px !important;
  position:relative !important;
  margin:auto !important;
  background-color:gray;
}

[id^="section"] {
    position: absolute;
    display: inline;
}

[id^="section"] img:last-child {
  display: none;
}

[id^="section"].not-active img:last-child {
  display: block;
}

[id^="section"].not-active img:first-child {
  display: none;
}

#section1 {
  left: 26px;
  position:absolute !important;
}

#section2 {
  left: 325px;
    position:absolute !important;
}

#section3 {
  left: 624px;
    position:absolute !important;
}

#section4 {
  left: 923px;
    position:absolute !important;
}

#section5 {
  left: 1222px;
    position:absolute !important;
}

.hidecode{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stickybanner">
<a href="#sections1">
    <div id="section1">
        <img src="http://imgur.com/A3hv0f3.png">
        <img src="http://imgur.com/iQv7yhd.png">
     </div>
  </a>

    <a href="#sections2">
  <div id="section2">
    <img src="http://imgur.com/Ld1TntV.png">
    <img src="http://imgur.com/oziGN60.png">
       </div>
      </a>

      <a href="#sections3">
    <div id="section3">
    <img src="http://imgur.com/zpViBoy.png">
    <img src="http://imgur.com/f5wSB6N.png">
     </div>
    </a>

    <a href="#sections4">
     <div id="section4">
    <img src="http://imgur.com/hgt5u84.png">
    <img src="http://imgur.com/Skhrull.png">
        </div></a>

    <a href="#sections5">
    <div id="section5">
    <img src="http://imgur.com/iOThUy8.png">
    <img src="http://imgur.com/lLRbfvT.png">
        </div></a>


    </div>

Answer 1

您可以使用 CSS 制作箭头形状的元素。它将为您提供更多的灵 active 和功能，并且可重复使用和管理。

我制作了一个 JSFiddle，描述了如何制作箭头形的 div，您需要的那种。您可以进一步调整它以实现您想要的。

https://jsfiddle.net/mzo5mqz2/

* {
	margin: 0;
	padding: 0;
}
/*Header full width*/
.header{
	width: 100%;
	position: fixed;
}
/*Common CSS to display tab shape*/
.header__tab{
    min-width: 250px;
    width: calc(20% - 20px);
    line-height: 50px;
    position: relative;
    text-align: center;
    margin: 50px auto;
    display: inline-block;
}
.header__tab:after, .header__tab:before{
    content:"";
    position:absolute;
    width:20px;
    height:50%;
    left:100%;
}
.header__tab--left__before, .header__tab--left__after {
	content: "";
    position: absolute;
    width: 20px;
    height: 50%;
    left: -20px;
}
/*Color for Tab 1*/
.tab1 {
	background: red;
}
.tab1:after{
    bottom:0;
    background: linear-gradient(to right bottom, red 50%, transparent 50%);
}
.tab1:before{
    top:0;
    background: linear-gradient(to right top, red 50%, transparent 50%);
}
.tab1--before {
	top: 0;
    background: linear-gradient(to right top, transparent 50%, red 50%);
}
.tab1--after {
	bottom: 0;
    background: linear-gradient(to right bottom, transparent 50%, red 50%);
}

/*Color for Tab 2*/
.tab2 {
	background: yellow;
}
.tab2:after{
    bottom:0;
    background: linear-gradient(to right bottom, yellow 50%, transparent 50%);
}
.tab2:before{
    top:0;
    background: linear-gradient(to right top, yellow 50%, transparent 50%);
}
.tab2--before {
	top: 0;
    background: linear-gradient(to right top, transparent 50%, yellow 50%);
}
.tab2--after {
	bottom: 0;
    background: linear-gradient(to right bottom, transparent 50%, yellow 50%);
}

<div class="header">
  <div class="header__tab tab1">
    <span class="header__tab--left__before tab1--before"></span>
    <span class="header__tab--left__after tab1--after"></span>
    <span>DOCUMENTATION&nbsp;ACCURACY</span>
  </div>
  <div class="header__tab tab2">
    <span class="header__tab--left__before tab2--before"></span>
    <span class="header__tab--left__after tab2--after"></span>
    <span>CODING&nbsp;EFFICIENCY</span>
  </div>
</div>

Web 开发提示:- 在开始时投入一些额外的时间，最终您将拥有最灵活的 Web 应用程序，使您能够根据需要快速更改界面。对于前 - 在这种情况下，您可以轻松更改选项卡的颜色或形状，如果您在一段时间后不再喜欢它的话。