我正在尝试创建一个选项卡菜单。我需要用常规 javascript 编码,而不是 jquery。
$(document).ready(function() {
//When page loads...
$(".general_info_content").hide(); //Hide all content
$("ul.general_info_tabs li:first").addClass("active").show(); //Activate first tab
$(".general_info_content:first").show(); //Show first tab content
//On Click Event
$("ul.general_info_tabs li").click(function() {
$("ul.general_info_tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".general_info_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
最佳答案
您想要做的核心如下 - 我确信有一千种不同的方法来完成每项任务:
从元素中删除 CSS 类:
var classes = document.getElementById([id]).className.split(" ");
for(var i = 0; i < classes.length; i++)
if(classes[i] == removeClass)
classes[i] = "";
document.getElementById([id]).className = classes.join(" ");
向元素添加 CSS 类:
document.getElementById([i]).className += " " + addClassName;
隐藏元素:
document.getElementById([i]).style.display = "none";
淡入淡出元素:
// not tested, but based on tested/used code
function fade(el, opacity, fadeInTime) {
if (opacity < 100) {
el.style.opacity = opacity / 100;
el.style.filter = "alpha(opacity=" + opacity + ")";
opacity += 5;
setTimeout(function () { fade(el, opacity, fadeInTime); }, fadeInTime / 5);
}
}
通过 CSS 和标签名称查找所有元素:
var matches = new Array();
var all = document.getElementByTagName(searchTagName);
for(var i = 0; i < all.length; i++){
if(all[i].className.replace(searchClassName, "") != all[i].className) {
matches.push(all[i].className);
}
}
// do something with (i.e., return or process) matches
郑重声明,我发现使用 jQuery 库的人想要知道如何使用 native JS/DOM 完成工作,这令人鼓舞,并非没有道理。
关于javascript - 有没有办法将这个 jquery 代码转换为 javascript?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6976824/