Question

我想通过JavaScript函数.socialtrans2添加类.socialtrans时让课程.navbg替换课程addnavbg，并在课程{时恢复这些更改{1}}已删除，但我不知道如何。

.navbg

    document.getElementById("nav01").innerHTML =
      "<ul id='menu'>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='social' href='instagram.html'><span class='socialtrans'></span><img src='graphics/Instagram_App_Large_May2016_200.png' alt='instagram'></a></li>" +
      "<li><a class='social' href='youtube.html'><span class='socialtrans'></span><img src='graphics/YouTube-logo-full_color.png' alt='youtube'></a></li>" +
      "<li><a class='social' href='soundloud.html'><span class='socialtrans'></span><img src='graphics/soundcloud-icon.png' alt='soundcloud'></a></li>"
    "</ul>";

    function setActive() {
      aObj = document.getElementById('nav01').getElementsByTagName('a');
      for (i = 0; i < aObj.length; i++) {
        if (document.location.href.indexOf(aObj[i].href) >= 0) {
          aObj[i].className = 'active';
        }
      }
    }

    window.onload = setActive;

    window.onscroll = function() {
      addnavbg()
    };

    function addnavbg() {
      if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        document.getElementById('menu').className = 'navbg';
      } else {
        document.getElementById('menu').className = '';
      }
    }

/* navigation */

ul#menu {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  text-align: center;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  transition: background-color 0.2s linear;
}
.navbg {
  background-color: #424242;
}
ul#menu li {
  display: inline;
}
ul#menu li a {
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  display: inline-block;
  padding: 10px 16px;
  transition: color 0.2s;
}
ul#menu li a:hover {
  background-color: transparent;
  font-weight: bold;
  color: #FF0000;
}
ul#menu a.regular:link {
  padding-top: 15px;
}
ul#menu li a.active {
  color: #ff0000;
}
/* social media links */

ul#menu a.social:link {
  border: 0;
  height: 30px;
  width: 30px;
  float: right;
}
ul#menu a.social.link:hover {
  display: inline-block;
}
span.socialtrans {
  position: fixed;
  width: 30px;
  height: 30px;
  float: right;
  opacity: 0;
  transition: opacity 0.2s;
}
span.socialtrans:hover {
  background-color: #ffffff;
  opacity: 0.7;
}
span.socialtrans2 {
  position: fixed;
  width: 30px;
  height: 30px;
  float: right;
  opacity: 0;
  transition: opacity 0.2s;
}
span.socialtrans2:hover {
  background-color: #424242;
  opacity: 0.7;
}

Answer 1

我建议改变你的CSS。假设除了外观之外你不需要任何其他原因的社交传输。

//takes precedence when navbg is not set
span.socialtrans{
}
span.socialtrans:hover{
}

//takes precedence when navbg is set
.navbg span.socialtrans{
}
.navbg span.socialtrans:hover{
}

关于css的一个很酷的事情是，更明确的css“路径”优先。所以当navbg不存在时，第一个css就会发生。虽然navbg在那里，但第二个会发生。

<!--first css in above example happens in this case-->
<ul id="menu">
  <li><a><span class="socialtrans"></span></a></li>
</ul>
<!--second css in above example happens in this case-->
<ul id="menu" class="navbg">
  <li><a><span class="socialtrans"></span></a></lis>
</ul>

Answer 2

您需要更换＆＃39; socialtrans＆＃39;与＆＃39; socialtrans2＆＃39;在每个＆lt; span＆gt;

function addnavbg() {
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        var menu = document.getElementById('menu');
        menu.className = 'navbg';
        var spans = menu.getElementsByTagName('span');
        for (var i = 0; i < spans.length; i++) {
            if (spans[i].className == 'socialtrans') {
                spans[i].className = 'socialtrans2';
            }
        }
    }
    else {
        var menu = document.getElementById('menu');
        menu.className = '';
        var spans = menu.getElementsByTagName('span');
        for (var i = 0; i < spans.length; i++) {
            if (spans[i].className == 'socialtrans2') {
                spans[i].className = 'socialtrans';
            }
        }
    }
}

Curtainrising的回答更加优雅。

Answer 3

这是你想要的吗？这可以通过jQuery轻松实现

var navbg = $('.navbg');
var menu = $('.menu');
var s = $('.socialtrans');
var s2 = $('.socialtrans2');

if(menu.hasClass(navbg)){
  menu.removeClass(s);
  menu.addClass(s2);
}else{
  menu.removeClass(s2);
  menu.addClass(s);
}

在scrollldown上添加类，并在添加类时替换class

3 个答案: