更改链接颜色

Question

我是js中的绝对新手。.我写了以下js：JSFiddle

*{
  margin: 0 auto;
}

.navbar {
	width: 100%;
	position: fixed;
	transition: 1s;
	color: #FFF;
}

.navbar ul li {
	display: inline-block;
	padding: 35px 30px 20px 0px;
	font-family: sans-serif;
	font-size: 15px;
}

.section1 {
	width: 100%;
	height: 100vh;
	background: grey;
}

.section2 {
	width: 100%;
	height: 100vh;
	background: black;
}

<div class="navbar" id='nav'>
	<ul>
	  <li><a href="" id="navi">Home</a></li>
	  <li><a href="">News</a></li>
	  <li><a href="">Gallery</a></li>
    <li>Home</li>
	  <li>News</li>
	  <li>Gallery</li>
	</ul>
</div>

<script type="text/javascript">
	var  nav = document.getElementById('nav');
	window.onscroll = function(){
		if (window.pageYOffset >100) {
			nav.style.background = "#FFF";
			nav.style.color = "#000";
			nav.style.marginTop = "-20px";
			nav.style.borderBottom = "1px solid #E5E5E5";
			nav.style.boxShadow = "0 1px 2px rgba(0,0,0,0.05)";
		} else {
			nav.style.background = "transparent";
			nav.style.color = "#FFF";
			nav.style.marginTop = "0px";
			nav.style.border = "none";
			nav.style.boxShadow = "none";
		}
	}
</script>
<div class="section1"></div>
<div class="section2"></div>

有人可以告诉我，我如何更改链接颜色（+悬停，已访问）？我只知道我可以使用 nav.style.color

更改文本颜色

感谢您的帮助！我对技巧，如何改进我的代码感到满意。至少我想创建像这样的导航Bussinessx

Answer 1

使用:link :visited :active :hover伪选择器

a:link {
  color: orange;
}

a:visited {
  color: magenta;
}

a:hover {
  color: lime;
}

a:active {
  color: red;
}

<a href="#">Link</a>
<a href="#a">Link2</a>
<a href="#b">Link3</a>

* {
  margin: 0 auto;
}

.navbar {
  width: 100%;
  position: fixed;
  transition: 1s;
  color: #FFF;
}

.navbar ul li {
  display: inline-block;
  padding: 35px 30px 20px 0px;
  font-family: sans-serif;
  font-size: 15px;
}

.section1 {
  width: 100%;
  height: 100vh;
  background: grey;
}

.section2 {
  width: 100%;
  height: 100vh;
  background: black;
}

.navbar {
  background: transparent;
  color: #FFF;
  margin-top: 0px;
  border: none;
  box-shadow: none;
}

.navbar.floating {
  background: #FFF;
  color: #000;
  margin-top: -20px;
  border-bottom: 1px solid #E5E5E5;
  box-shadow: 1px 2px rgba(0, 0, 0, 0.05);
}

a{
  color: inherit;
}

<div class="navbar" id='nav'>
  <ul>
    <li><a href="" id="navi">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Gallery</a></li>
    <li>Home</li>
    <li>News</li>
    <li>Gallery</li>
  </ul>
</div>

<script type="text/javascript">
  var nav = document.getElementById('nav');
  window.onscroll = function() {
    if (window.pageYOffset > 100) {
      nav.classList.add('floating');
    } else {
      nav.classList.remove('floating');
    }
  }
</script>
<div class="section1"></div>
<div class="section2"></div>