javascript - 将活动类添加到当前元素

Question

我正在寻找向我当前的导航栏添加一个活动元素类，但目前正在苦苦挣扎。

我已经尝试过 w3schools 方法，但也许我执行不正确。

代码：

// Get the container element
var btnContainer = document.getElementsByClassName("tab");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("link");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

#navbar {
  position: absolute;
  text-align: right;
  top: 3.5em;
  right: 3.5em;
  z-index: 2;
}

.tab {
  background-color: white;
  opacity: 0.3;
  height: 3.5em;
  width: 0.2em;
  margin-bottom: 1em;
}

.tab:hover{
  opacity:1;
  transition:0.7s ease;
}

.link:hover > .text {
  opacity:1;
  transition:0.7s ease;
}

.active, .tab:hover {
  opacity:1;
  transition:0.7s ease;
}

.active, .text:hover > .text {
  opacity:1;
  transition:0.7s ease;
}

<div id="navbar">

	<div class="tab">

		<a class="link active" href="#home">
			<div class="text">Home</div>
		</a></div>

	<div class="tab">

		<a class="link" href="#work">
			<div class="text">Work</div>
	</a></div>
	
	<div class="tab">
		
		<a class="link" href="#about">
			<div class="text">About</div>
	</a></div>
</div>

导航栏当前正在工作，但没有活动元素。我希望选项卡在活动时为 opacity: 1 。

标签： javascriptjqueryhtmlcsshyperlink

Answer 1

使用以下方法查看下面的快速 jQuery 解决方案：

• 。上（）
• .closest()
• .addClass() 和
• .removeClass()

$(function() {
    var links = $('.tab > .link');
    links.on('click', function() {
        links.removeClass('active').closest('.tab').removeClass('active');
        $(this).addClass('active').closest('.tab').addClass('active');
    })
    .first().click();
});

#navbar {
  position: absolute;
  text-align: right;
  top: 3.5em;
  right: 3.5em;
  z-index: 2;
}

.tab {
  background-color: white;
  opacity: 0.3;
  height: 3.5em;
  width: 0.2em;
  margin-bottom: 1em;
}

.tab:hover{
  opacity:1;
  transition:0.7s ease;
}

.link:hover > .text {
  opacity:1;
  transition:0.7s ease;
}

.active, .tab:hover {
  opacity:1;
  transition:0.7s ease;
}

.active, .text:hover > .text {
  opacity:1;
  transition:0.7s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">

	<div class="tab">

		<a class="link active" href="#home">
			<div class="text">Home</div>
		</a></div>

	<div class="tab">

		<a class="link" href="#work">
			<div class="text">Work</div>
	</a></div>
	
	<div class="tab">
		
		<a class="link" href="#about">
			<div class="text">About</div>
	</a></div>
</div>