将活动类添加到当前元素答案

【问题标题】：Adding active class to current element将活动类添加到当前元素
【发布时间】：2019-06-24 03:32:48
【问题描述】：

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

我已经尝试过 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。

【问题讨论】：

tab 不是id，它是一个类，getElementById 不起作用
@CalvinNunes 我已将 'getElementById' 更改为 'getElementsByClassName' 但仍然不起作用 - 有什么想法吗？
“活动”是指悬停元素还是单击元素？
@CalvinNunes 我的意思是点击它:)
为什么评论说 'Get all button with class="btn" inside the container' 但你得到的是那些带有类“link”的按钮？

标签： javascript jquery html css hyperlink

【解决方案1】：

首先，您需要将类添加到父 div，而不是链接，因为将不透明度设置为 0.3 的是父级。现在，我在jQuery 中做到了，因为它更容易实现。希望不是问题。

$('.link').on('click', function() {
  $('.link').parent().removeClass('active');
  $(this).parent().addClass('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;
}

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

	<div class="tab active">

		<a class="link" 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>

【讨论】：

嗨 Alain，我刚刚尝试过这种方法，但仍然没有运气，但是当我通过您的代码 sn-p 运行它时可以工作。
您是否将 jQuery 库添加到您的项目中？
我做到了！不知道为什么会出现问题
奇怪 :(，更改后您是否从浏览器中清除了缓存？

【解决方案2】：

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

.on()
.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>

【讨论】：

嗨，彼得，这行得通！ - 这里唯一对我有用的解决方案。但是现在，它似乎从没有活动状态开始，我希望“主页”页面开始活动。 “文本”也不会保持活动状态，只有“选项卡” - 这是一个代码笔，让您更容易理解 (codepen.io/JustNayWillo/pen/aXpKbb) - 谢谢！
要让 Home 开始活动，您可以如图所示添加 .first().click() 或简单地将 active 类添加到 html 中的第一个 .tab 元素。要使 Text 活动，只需使.removeClass() 和 addClass() 显示更改。

【解决方案3】：

在Javascript中你可以使用.querySelectorAll():

document.querySelectorAll('.tab .link').forEach(function(ele, idx) {
    ele.addEventListener("click", function(e) {
        e.preventDefault();
        document.querySelectorAll('.tab.active').forEach(ele => ele.classList.remove('active'));
        ele.parentNode.classList.toggle('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>

【讨论】：