向当前元素添加活动类

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>

导航栏当前正在工作，但是没有活动的元素。我希望标签页不透明：激活时为1。

Answer 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>

Answer 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>

Answer 3

在Javascript中，您可以使用.querySelectorAll()：

 tspopa <- tspop
 tspopa <- tspopa %>%select(V1:V10)
 tspopa <- na.replace(tspopa,0.25)
 tspopb <- tspop
 tspopb <- tspopb %>%select(V11:V15)
 tspopc <- tspop
 tspopc <- tspopc %>%select(V16:V20)
 tspopc <- na.replace(tspopc,0)
 A <- tspopa 
 B <- tspopb
 C <- tspopc
 tspopd <- cbind(A, B, C)


var(tspopd$ c(V1:V20))

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;
}