导航栏中的活动选项卡

Question

我正在尝试在我的导航栏中创建一个活动选项卡。 我为此使用了javascript。 我的代码中有 javascript。 我找不到它不起作用的原因

 var btnContainer = document.getElementById("active-link"); var btns = btnContainer.getElementsByClassName("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"; }) }

 .active-link { display: flex; list-style: none; position: relative; top: 10rem; left: 25%; margin: 100px -5px; }.button { text-decoration: none; padding-right: 100px; padding-left: 100px; padding-bottom: 10px; cursor: pointer; display: inline-block; border: none; background-color: transparent; color: rgb(0, 0, 0); border-bottom: 2px solid black; font-size: 1.5rem; transition: ease; }.button:hover { color: red; border-bottom: 5px solid red; padding-bottom: 7px; }

 <div class="active-link" id="active-link"> <li> <a class="button">him</a> </li> <li> <a class="button">her</a> </li> <li> <a class="button">xyz</a> </li> </div>

填充的活动链接。 参考可以类似于 new balances 网站中的活动选项卡

Answer 1

@瓦达尔

我添加了从所有当前活动选项卡中删除类的新功能。 它将一次激活一个选项卡。

这是解决方案：

 var btnContainer = document.getElementById("active-link"); var btns = btnContainer.getElementsByClassName("button"); function removeClass(elems, className) { [].forEach.call(document.querySelectorAll(elems), function(el) { el.classList.remove(className); }); } for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function(e) { removeClass('.button', 'active') this.classList.toggle('active'); }) }

 .active-link { display: flex; list-style: none; position: relative; top: 10rem; left: 25%; margin: 100px -5px; }.button { text-decoration: none; padding-right: 100px; padding-left: 100px; padding-bottom: 10px; cursor: pointer; display: inline-block; border: none; background-color: transparent; color: rgb(0, 0, 0); border-bottom: 2px solid black; font-size: 1.5rem; transition: ease; }.button:hover, .active { color: red; border-bottom: 5px solid red; padding-bottom: 7px; }

 <div class="active-link" id="active-link"> <li> <a class="button">him</a> </li> <li> <a class="button">her</a> </li> <li> <a class="button">xyz</a> </li> </div>

Answer 2

这是因为默认情况下没有任何活动。 尝试添加一个活动元素，否则代码：

 var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace("active");

会报错。

另外，请检查您的 JS 控制台以查找错误并自行解决:)