活动滚动类状态

Question

我有4个链接，我希望他们更改添加活动到它滚动到哪个部分。

但是我不希望你悬停时出现超链接感觉我只想将活动添加到选择是当前状态的链接。

#pagemenu{
	display: block;
	position: fixed;
	top: 40%;
	font-size: 12px;
	text-transform: uppercase;
	
}


#pagemenu ul{
	list-style: none;
	display: block;
	margin-left: 0;
}

.pagelink{
	display: block;	
	height: 38px;
	width: 200px;
	margin-bottom: 6px;
	border-left: 2px solid red;
	color: red;
	padding-left: 10px;
	padding-top: 10px;
}


.active2{
	background-color: #424242;
	border-left: 2px solid #e1b130;
	color: #e1b130;
}
​

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagemenu">
	<a class="pagelink active2" href="#">Link Here</a>
	<a class="pagelink" href="#">Link Here</a>
	<a class="pagelink" href="#">Link Here</a>
	<a class="pagelink" href="#">Link Here</a>
</div>​

Answer 1

您可以使用javascript。以下是此问题中包含的代码段的实现方式

获取课程pagelink的所有主要元素

向这些元素添加单击事件

在css样式表中添加名为highlight的css类

当您单击锚标记时，您将从所有元素中删除任何突出显示的背景颜色，并仅将该背景颜色应用于单击的活动锚链接。

请参阅下面的代码段

function highlight(e) {
  for (var x = 0; x < all_anchors.length; ++x) {
    if (e.target != all_anchors[x]) {
      all_anchors[x].classList.remove("highlight")

    } else {
      all_anchors[x].classList.add("highlight")
    }
  }
}
all_anchors = document.getElementsByClassName("pagelink");
for (var x = 0; x < all_anchors.length; ++x) {
  all_anchors[x].addEventListener("click", highlight);
}

#pagemenu {
  display: block;
  position: fixed;
  top: 40%;
  font-size: 12px;
  text-transform: uppercase;
}

#pagemenu ul {
  list-style: none;
  display: block;
  margin-left: 0;
}

.pagelink {
  display: block;
  height: 38px;
  width: 200px;
  margin-bottom: 6px;
  border-left: 2px solid red;
  color: red;
  padding-left: 10px;
  padding-top: 10px;
  transition: all 0.5s;
  text-decoration: none;
}

.active2 {
  background-color: #424242;
  border-left: 2px solid #e1b130;
  color: #e1b130;
}

.highlight {
  background-color: #424242;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagemenu">
  <a class="pagelink" href="#">Link Here</a>
  <a class="pagelink" href="#">Link Here</a>
  <a class="pagelink" href="#">Link Here</a>
  <a class="pagelink" href="#">Link Here</a>
</div>​