// 根据class 获取元素
var getElement = function(selector) {
return document.querySelector(selector);
}
// 根据class 获取所有class 的元素
var getAllElement = function(selector) {
return document.querySelectorAll(selector);
}
// 获取元素class
var getClass = function(element) {
return element.getAttribute("class");
}
// 给元素设置class
var setClass = function(element, cls) {
return element.setAttribute("class", cls);
}
// 给元素添加样式
var addClass = function(element, cls) {
var baseCls = getClass(element);
if (baseCls.indexOf(cls) === -1) {
setClass(element, baseCls + " " + cls);
}
}
// 元素删除指定样式
var delClass = function(element, cls) {
var baseCls = getClass(element);
if (baseCls.indexOf(cls) != -1) {
setClass(element, baseCls.split(cls).join(' ').replace(/\s+/g, ' '));
}
}
function nav_onclick(el) {
var list_item = getAllElement(el);
var _len = list_item.length;
if (list_item) {
for (var i = 0; i < _len; i++) {
list_item[i].onclick = function () {
for (var i = 0; i < _len; i++) {
delClass(list_item[i],"active");
}
addClass(this,"active");
}
}
}
}
nav_onclick(".el");
function navTag(nav_ls_id, nav_con_id,nav_ls_item,nav_con_item) {
if (document.getElementById(nav_ls_id) && document.getElementById(nav_con_id)) {
var nav_ls_item = document.getElementById(nav_ls_id).getElementsByTagName(nav_ls_item);
var nav_con_item = document.getElementById(nav_con_id).getElementsByTagName(nav_con_item);
var len = nav_ls_item.length;
addClass(nav_ls_item[0],"active")
addClass(nav_con_item[0],"active")
for (var i = 0; i < len; i++) {
nav_ls_item[i].setAttribute("data-index", i);
nav_con_item[i].setAttribute("data-index", i);
}
for (var i = 0; i < len; i++) {
nav_ls_item[i].onclick = function() {
for (var i = 0; i < len; i++) {
delClass(nav_ls_item[i],"active");
delClass(nav_con_item[i],"active")
}
addClass(this,"active")
_index = this.getAttribute("data-index");
addClass(nav_con_item[_index],"active") }
}
}
}
navTag("cat_hot", "hot_con","a","dl")
原生js封装函数,addClass removeClass,常用tag切换
最新推荐文章于 2022-12-06 23:33:48 发布