Question

我是这个网站和Web开发的新手，但我正在开展一个项目，我需要一些帮助。请耐心等待我，因为我还是新手，所以我理解我的代码很草率，可能效率低下。

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

由于我使用独特的形状来执行此操作，因此我只使用了图像。我不知道更好，所以如果你有任何建议，我将不胜感激。但是，这不是我向大家提出的问题。我已经想出如何使点击滚动操作工作，但我在这里试图突出显示用户选择的元素。

我想知道如何基于它的当前状态有条件地切换图像。例如，如果您查看下面的jsfiddle链接，您将看到单击一个元素将切换所有其他元素，但其中一些仍然是灰色的，其中一些将突出显示。

我认为如果你看到它在行动中你会理解我的困境，所以请找到下面演示的链接：

谢谢！

struct PeriodItem {
    let key: String

    let periodEnd: String
    let periodName: String
    let periodStart: String

    let ref: FIRDatabaseReference?

    init(periodEnd: String, periodName: String, periodStart: String, key: String = "") {
        self.key = key

        self.periodEnd = periodEnd
        self.periodName = periodName
        self.periodStart = periodStart

        self.ref = nil
    }

    init(snapshot: FIRDataSnapshot) {
        key = snapshot.key

        let snapshotValue = snapshot.value as! [String: AnyObject]
        periodEnd = snapshotValue["periodEnd"] as! String
        periodName = snapshotValue["periodName"] as! String
        periodStart = snapshotValue["periodStart"] as! String

        ref = snapshot.ref
    }

    func toAnyObject() -> Any {
        return [
            "periodEnd": periodEnd,
            "periodName": periodName,
            "periodStart": periodStart,

            "key": key
        ]
    }
}

Answer 1

如此男子气概，你可以用这个jQuery做到这一切

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

CSS中最重要的变化是这样的：

[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;
}

Ooh和大变化，活跃/活跃的图像现在都在同一个div中，并通过带有first-和last-孩子的CSS触发！

如果有什么不清楚，请在评论部分询问

＆＃13;

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

＆＃13;

body {
  margin: 0;
  width: 1596px;
}

section {
  height: ;
}

.stickybanner {
  height: 71px;
  padding-bottom: 20px
}

.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#section1 {
  padding-bottom: 125px;
}

.bannerbg {
  z-index: -1;
  position: absolute;
  left: 0px;
  right: 0px;
}

#banner {
  position: absolute;
}

[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;
}

#section2 {
  left: 325px;
}

#section3 {
  left: 624px;
}

#section4 {
  left: 923px;
}

#section5 {
  left: 1222px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>

    <div class="stickybanner">
      <div class="bannerbg"><img src="http://imgur.com/UaZtFBu.png"></div>

      <div id="section1">
        <img src="http://imgur.com/A3hv0f3.png">
        <img src="http://imgur.com/iQv7yhd.png">
      </div>
      <div id="section2">
        <img src="http://imgur.com/Ld1TntV.png">
        <img src="http://imgur.com/oziGN60.png">
      </div>
      <div id="section3">
        <img src="http://imgur.com/zpViBoy.png">
        <img src="http://imgur.com/f5wSB6N.png">
      </div>
      <div id="section4">
        <img src="http://imgur.com/hgt5u84.png">
        <img src="http://imgur.com/Skhrull.png">
      </div>
      <div id="section5">
        <img src="http://imgur.com/iOThUy8.png">
        <img src="http://imgur.com/lLRbfvT.png">
      </div>


    </div>

  </section>

＆＃13;

如何根据当前是否选择元素来有条件地切换元素

1 个答案: