[英]Add class name to element outside current container
How do I add a class name outside the current container, based on the id
and/or the BS attribute?如何根据
id
和/或 BS 属性在当前容器之外添加类名?
Example code:示例代码:
<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>
Take for example the first li
.以第一个
li
为例。 It has is-active
class, its a
has attribute #nav-1
.它具有
is-active
类,它a
属性#nav-1
。 I want to be able to add a class name active
to <div class="tab-pane">
with the id="nav-1
. Is that possible?我希望能够使用
id="nav-1
向<div class="tab-pane">
添加一个active
的类名。这可能吗?
In order for you to be able to click on any of the elements of a, you must first call the click event of that element in the form of $("a[data-bs-target|='#nav']").on('click', function(event){}) and then get the data-bs-target Attribute through this.getAttribute('data-bs-target') and get the value of each element and finally delete all the desired classes and That element added为了让您能够点击 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>
I'm going to guess that you mean that at page load, you'd like to find the a
element inside the .nav-item
element with the class is-active
and, using its data-bs-target
attribute, add the active
class to the .tab-pane
that matches the selctor in data-bs-target
.我猜你的意思是在页面加载时,你想在
.nav-item
元素中找到a
元素active
并使用它的data-bs-target
属性添加is-active
类到与data-bs-target
中的选择器匹配的.tab-pane
中。
If so, you can find the element by using document.querySelector(".nav-item.is-active a")
, then take its data-bs-target
attribute and, since that's a valid CSS selector, use it to find the relevant tab-pane
element and add the class name.如果是这样,您可以使用
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");
}
Notice the optional chaining ( ?.
) there, so you don't get an error if there's no match for .nav-item.is-active
or there's no match for the selector in its data-bs-target
attribute.请注意那里的可选链接 (
?.
),因此如果.nav-item.is-active
不匹配或者其data-bs-target
属性中的选择器不匹配,则不会出现错误。
Live Example:现场示例:
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.