[英]Add class name to element outside current container
如何根据id
和/或 BS 属性在当前容器之外添加类名?
示例代码:
<ul class="nav">
<li class="nav-item is-active">
<a href="#" data-bs-target="#nav-1">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a href="#" data-bs-target="#nav-2">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a href="#" data-bs-target="#nav-3">Lorem Ipsum</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="nav-1">
<p>Lorem Ipsum</p>
</div>
<div class="tab-pane" id="nav-2">
<p>Lorem Ipsum</p>
</div>
<div class="tab-pane" id="nav-3">
<p>Lorem Ipsum</p>
</div>
</div>
以第一个li
为例。 它具有is-active
类,它a
属性#nav-1
。 我希望能够使用id="nav-1
向<div class="tab-pane">
添加一个active
的类名。这可能吗?
为了让您能够点击 a 的任何元素,您必须首先以 $("a[data-bs-target|='#nav']") 的形式调用该元素的点击事件.on('click', function(event){}) 然后通过this.getAttribute('data-bs-target') 获取data-bs-target 属性并获取每个元素的值最后删除所有想要的类和添加的那个元素
<style>
.active {
color: orange;
font-weight: bold;
border: 1px solid orange;
}
</style>
<ul class="nav">
<li class="nav-item is-active">
<a href="#" data-bs-target="#nav-1">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a href="#" data-bs-target="#nav-2">Lorem Ipsum</a>
</li>
<li class="nav-item">
<a href="#" data-bs-target="#nav-3">Lorem Ipsum</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="nav-1">
<p>Lorem Ipsum 1</p>
</div>
<div class="tab-pane" id="nav-2">
<p>Lorem Ipsum 2</p>
</div>
<div class="tab-pane" id="nav-3">
<p>Lorem Ipsum 3</p>
</div>
</div>
<script>
$("a[data-bs-target|='#nav']").on('click',function(event){
event.preventDefault();
var attributeValue = this.getAttribute('data-bs-target');
$('.tab-pane').removeClass('active');
$(attributeValue).addClass('active');
});
</script>
var activeEl = document.querySelectorAll(".is-active")[0]; //Get active li element var dataset = activeEl.querySelectorAll(":scope > a")[0].dataset; //Get data attributes from child a element var div = document.getElementById(dataset.bsTarget.replace("#", "")); //Cut # from data-bs-target and get the tab-pane element by id div.classList.add("mystyle"); //Add class
.mystyle{ background: #000000; color: #FFFFFF; }
<ul class="nav"> <li class="nav-item is-active"> <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a> </li> <li class="nav-item"> <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a> </li> <li class="nav-item"> <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="nav-1"> <p>Lorem Ipsum</p> </div> <div class="tab-pane" id="nav-2"> <p>Lorem Ipsum</p> </div> <div class="tab-pane" id="nav-3"> <p>Lorem Ipsum</p> </div> </div>
我猜你的意思是在页面加载时,你想在.nav-item
元素中找到a
元素active
并使用它的data-bs-target
属性添加is-active
类到与data-bs-target
中的选择器匹配的.tab-pane
中。
如果是这样,您可以使用document.querySelector(".nav-item.is-active a")
找到该元素,然后获取它的data-bs-target
属性,因为这是一个有效的 CSS 选择器,所以使用它来查找相关tab-pane
元素并添加类名。
const a = document.querySelector(".nav-item.is-active a");
const selector = a?.getAttribute("data-bs-target");
if (selector) {
document.querySelector(selector)?.classList.add("active");
}
请注意那里的可选链接 ( ?.
),因此如果.nav-item.is-active
不匹配或者其data-bs-target
属性中的选择器不匹配,则不会出现错误。
现场示例:
const a = document.querySelector(".nav-item.is-active a"); const selector = a?.getAttribute("data-bs-target"); console.log(selector); if (selector) { document.querySelector(selector)?.classList.add("active"); }
.active { color: orange; font-weight: bold; border: 1px solid orange; }
<ul class="nav"> <li class="nav-item is-active"> <a href="#" data-bs-target="#nav-1">Lorem Ipsum</a> </li> <li class="nav-item"> <a href="#" data-bs-target="#nav-2">Lorem Ipsum</a> </li> <li class="nav-item"> <a href="#" data-bs-target="#nav-3">Lorem Ipsum</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" id="nav-1"> <p>Lorem Ipsum</p> </div> <div class="tab-pane" id="nav-2"> <p>Lorem Ipsum</p> </div> <div class="tab-pane" id="nav-3"> <p>Lorem Ipsum</p> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.