Question

我有两页home.html和service.html。在点击此链接a href="services#v-pills-manpower"的主页上，我想将show active类添加到服务页面上的ID为#v-pills-manpower的div。

这是我service.html中的html

<div class="tab-pane fade show active" id="v-pills-services"></div>

<div class="tab-pane fade" id="v-pills-manpower"></div>

这是javascript

var hash = document.location.hash;
var pills = document.querySelectorAll('*[id]');

if($.inArray(hash, pills)) {
    // console.log(hash + 'is in IDs array');
    // Add show active class to the div with the hash id
}

我如何实现目标？

Answer 1

使用classList添加，删除或切换类：

// single item
document.getElementById('some-id').classList.add('show')

// multiple items
let elements = document.querySelectorAll('*[id]')

for (let i of elements) {
    elements[i].classList.add('show')
}

对于您的示例，请使用哈希作为选择器：

let sel = document.location.hash.substr(1)
document.getElementById(sel).classList.add('show')

编辑：如果你要进行downvote，至少要礼貌地解释为什么。

Answer 2

请参阅此处的答案Change an element's class with JavaScript

向元素添加其他类：向类添加类   元素，在不删除/影响现有值的情况下，添加空格   和新的类名，如下：

document.getElementById("MyElement").className += " MyClass";

在你的情况下，它应该是：

document.getElementById("v-pills-manpower").className += " show active";

如果您使用的是Bootstrap，则显示标签/药丸的默认类应为：fade in active。

Answer 3

由于您正在使用jQuery，您可以使用一行简单的代码轻松完成此操作：

$(location.hash).addClass( 'show active' );

您不需要创建元素数组并进行搜索，因为您匹配的是元素id。 location.hash恰好采用jQuery id选择器的格式："#the-id"，因此您可以直接使用它。

因此$(location.hash)为您提供了一个包含元素的jQuery对象。然后.addClass()添加类。您还可以使用.removeClass()删除类。

如何将类添加到具有id的div中

3 个答案: