在 Javascript 中添加和删除 类
Adding and removing classes in Javascript
我试图让它工作,但无法弄清楚。
已经搜索过主题,但要么我不理解它们,要么没有被问到。可能两者兼而有之! :P
我只是尝试弹出包装,当您单击 "clickme" 时,如果它弹出,它应该保留并只显示其他内容。
如果 "clickme" 中的一个被点击两次,它应该关闭...
HTML
<a id="nav1">Clickme</a>
<a id="nav2">Clickme</a>
<div id="navwrapper">
<h1 id="dropdown1">Menu1</h1>
<h1 id="dropdown2">Menu2</h1>
</div>
Javascript
document.getElementById("nav1").onclick=function(){
var dropdown1 = document.getElementById('dropdown1');
var dropdown2 = document.getElementById('dropdown2');
var navwrapper = document.getElementById('navwrapper');
if (dropdown1('not(.selected)') && navwrapper('not(.selected)')) {
dropdown1.addClass('unselected');
navwrapper.addClass('unselected');
}else{
dropdown1.addClass('selected');
navwrapper.addClass('selected');
dropdown2.addClass('unselected');
}
};
document.getElementById("nav2").onclick=function(){
var dropdown1 = document.getElementById('dropdown1');
var dropdown2 = document.getElementById('dropdown2');
var navwrapper = document.getElementById('navwrapper');
if (dropdown2('not(.selected)') && navwrapper('not(.selected)')) {
dropdown2.addClass('unselected');
navwrapper.addClass('unselected');
}else{
dropdown2.addClass('selected');
navwrapper.addClass('selected');
dropdown1.addClass('unselected');
}
};
CSS
#navwrapper.selected {
display:block;
}
#navwrapper.unselected {
display:none;
}
#navwrapper {
background-color:#ff0000;
transition: all 500ms ease;
}
#dropdown1, #dropdown2 {
transition: all 500ms ease;
}
#dropdown1.selected, #dropdown2.selected {
display:block;
}
#dropdown1.unselected, #dropdown2.unselected {
display:none;
}
您可以使用 HTMLElement
的标准 className
属性 更改任何元素的 class 名称。然而,这个 gets/sets 完整的 class 名称,引号之间的所有内容。例子
<a id="one" class="hello world">
JavaScript:
var one = document.getElementById('one');
one.className = 'new world';
现在 HTML 看起来像:
<a id="one" class="hello world">
要在元素上添加或删除 个 class 元素,您可以使用 classList
界面。
one.classList.remove('hello');
one.classList.add('new');
参考:https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
请注意 classList
并未得到普遍支持。如果你需要支持 Internet Explorer 9-,这就不行了。在这种情况下,您将需要创建自己的 addClass
和 removeClass
函数,或者使用提供它们的库,例如 jQuery。
function addClass(el, name) {
var regexp = new RegExp('(^| )' + name + '( |$)');
if (!regexp.test(el.className)) {
el.className += ' ' + name;
}
el.className = el.className.trim();
};
function removeClass(el, name) {
var regexp = new RegExp('(^| )' + name + '( |$)');
el.className = el.className.replace(regexp, '');
el.className = el.className.trim();
};
用法:
removeClass(one, 'hello');
addClass(one, 'new');
一般来说,将 jQuery 的 API 与本地 JavaScript/ECMAScript API 混合使用时要小心。这就是您的原始代码中发生的事情。您正在将 jQuery 方法应用于标准 JS HTMLElement
实例。这是很多混乱的根源!
这就是您希望它的工作方式吗?如果是,我只是将脚本更改为仅使用 jQuery。
JSFiddle
试试这个代码:
Javascript:
$( "#nav1" ).click(function() {
var dropdown1 = $("#dropdown1");
var dropdown2 = $("#dropdown2");
var navwrapper = $("#navwrapper");
if (dropdown1.hasClass( "selected" ) && navwrapper.hasClass( "selected" )) {
dropdown1.removeClass('selected');
dropdown1.addClass('unselected');
navwrapper.removeClass('selected');
navwrapper.addClass('unselected');
}else{
dropdown1.removeClass('unselected');
dropdown1.addClass('selected');
navwrapper.removeClass('unselected');
navwrapper.addClass('selected');
dropdown2.removeClass('selected');
dropdown2.addClass('unselected');
}
});
$( "#nav2" ).click(function() {
var dropdown1 = $("#dropdown1");
var dropdown2 = $("#dropdown2");
var navwrapper = $("#navwrapper");
if (dropdown2.hasClass( "selected" ) && navwrapper.hasClass( "selected" )) {
dropdown2.removeClass('selected');
dropdown2.addClass('unselected');
navwrapper.removeClass('selected');
navwrapper.addClass('unselected');
}else{
dropdown2.removeClass('unselected');
dropdown2.addClass('selected');
navwrapper.removeClass('unselected');
navwrapper.addClass('selected');
dropdown1.removeClass('selected');
dropdown1.addClass('unselected');
}
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a id="nav1">Clickme</a>
<a id="nav2">Clickme</a>
<div id="navwrapper" class="selected">
<h1 id="dropdown1" class="selected">Menu1</h1>
<h1 id="dropdown2" class="unselected">Menu2</h1>
</div>
我不是 100% 确定你想要完成什么,但我猜你想要 2 个带有选项的下拉菜单?
我的建议是使用 Bootstrap (http://getbootstrap.com/) 这是一个很棒的工具,它使用 Javascript 和 Jquery 来完成这个,更像是响应式网站和应用程序、更快的反应和 searchable/sortable 个表格。
这个 jsfiddle 是:
https://jsfiddle.net/wh64mLhu/
分解它:
步骤 1
像这样在 header 中添加 Bootstrap CSS :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
步骤 2
像这样在 body 的底部添加 Javascript
<html>
<head>
<!-- Header Code + CSS Here -->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
步骤 3
创建 HTML body 任何你想要的代码,例如我上面分享的 JSFiddle。
这包含 2 个下拉列表。
首先您创建一个 <div>
以表明您将在您的页面中创建一个新的 "division"。
如果您想要使用 <span>
的图像,则可以添加 <Button>
。
完成此操作后,您使用 <ul>
创建列表,并在列表中包含所有元素 <li>
.
我希望这对您有所帮助并说服您使用 Bootstrap :)
我试图让它工作,但无法弄清楚。 已经搜索过主题,但要么我不理解它们,要么没有被问到。可能两者兼而有之! :P
我只是尝试弹出包装,当您单击 "clickme" 时,如果它弹出,它应该保留并只显示其他内容。 如果 "clickme" 中的一个被点击两次,它应该关闭...
HTML
<a id="nav1">Clickme</a>
<a id="nav2">Clickme</a>
<div id="navwrapper">
<h1 id="dropdown1">Menu1</h1>
<h1 id="dropdown2">Menu2</h1>
</div>
Javascript
document.getElementById("nav1").onclick=function(){
var dropdown1 = document.getElementById('dropdown1');
var dropdown2 = document.getElementById('dropdown2');
var navwrapper = document.getElementById('navwrapper');
if (dropdown1('not(.selected)') && navwrapper('not(.selected)')) {
dropdown1.addClass('unselected');
navwrapper.addClass('unselected');
}else{
dropdown1.addClass('selected');
navwrapper.addClass('selected');
dropdown2.addClass('unselected');
}
};
document.getElementById("nav2").onclick=function(){
var dropdown1 = document.getElementById('dropdown1');
var dropdown2 = document.getElementById('dropdown2');
var navwrapper = document.getElementById('navwrapper');
if (dropdown2('not(.selected)') && navwrapper('not(.selected)')) {
dropdown2.addClass('unselected');
navwrapper.addClass('unselected');
}else{
dropdown2.addClass('selected');
navwrapper.addClass('selected');
dropdown1.addClass('unselected');
}
};
CSS
#navwrapper.selected {
display:block;
}
#navwrapper.unselected {
display:none;
}
#navwrapper {
background-color:#ff0000;
transition: all 500ms ease;
}
#dropdown1, #dropdown2 {
transition: all 500ms ease;
}
#dropdown1.selected, #dropdown2.selected {
display:block;
}
#dropdown1.unselected, #dropdown2.unselected {
display:none;
}
您可以使用 HTMLElement
的标准 className
属性 更改任何元素的 class 名称。然而,这个 gets/sets 完整的 class 名称,引号之间的所有内容。例子
<a id="one" class="hello world">
JavaScript:
var one = document.getElementById('one');
one.className = 'new world';
现在 HTML 看起来像:
<a id="one" class="hello world">
要在元素上添加或删除 个 class 元素,您可以使用 classList
界面。
one.classList.remove('hello');
one.classList.add('new');
参考:https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
请注意 classList
并未得到普遍支持。如果你需要支持 Internet Explorer 9-,这就不行了。在这种情况下,您将需要创建自己的 addClass
和 removeClass
函数,或者使用提供它们的库,例如 jQuery。
function addClass(el, name) {
var regexp = new RegExp('(^| )' + name + '( |$)');
if (!regexp.test(el.className)) {
el.className += ' ' + name;
}
el.className = el.className.trim();
};
function removeClass(el, name) {
var regexp = new RegExp('(^| )' + name + '( |$)');
el.className = el.className.replace(regexp, '');
el.className = el.className.trim();
};
用法:
removeClass(one, 'hello');
addClass(one, 'new');
一般来说,将 jQuery 的 API 与本地 JavaScript/ECMAScript API 混合使用时要小心。这就是您的原始代码中发生的事情。您正在将 jQuery 方法应用于标准 JS HTMLElement
实例。这是很多混乱的根源!
这就是您希望它的工作方式吗?如果是,我只是将脚本更改为仅使用 jQuery。 JSFiddle
试试这个代码:
Javascript:
$( "#nav1" ).click(function() {
var dropdown1 = $("#dropdown1");
var dropdown2 = $("#dropdown2");
var navwrapper = $("#navwrapper");
if (dropdown1.hasClass( "selected" ) && navwrapper.hasClass( "selected" )) {
dropdown1.removeClass('selected');
dropdown1.addClass('unselected');
navwrapper.removeClass('selected');
navwrapper.addClass('unselected');
}else{
dropdown1.removeClass('unselected');
dropdown1.addClass('selected');
navwrapper.removeClass('unselected');
navwrapper.addClass('selected');
dropdown2.removeClass('selected');
dropdown2.addClass('unselected');
}
});
$( "#nav2" ).click(function() {
var dropdown1 = $("#dropdown1");
var dropdown2 = $("#dropdown2");
var navwrapper = $("#navwrapper");
if (dropdown2.hasClass( "selected" ) && navwrapper.hasClass( "selected" )) {
dropdown2.removeClass('selected');
dropdown2.addClass('unselected');
navwrapper.removeClass('selected');
navwrapper.addClass('unselected');
}else{
dropdown2.removeClass('unselected');
dropdown2.addClass('selected');
navwrapper.removeClass('unselected');
navwrapper.addClass('selected');
dropdown1.removeClass('selected');
dropdown1.addClass('unselected');
}
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<a id="nav1">Clickme</a>
<a id="nav2">Clickme</a>
<div id="navwrapper" class="selected">
<h1 id="dropdown1" class="selected">Menu1</h1>
<h1 id="dropdown2" class="unselected">Menu2</h1>
</div>
我不是 100% 确定你想要完成什么,但我猜你想要 2 个带有选项的下拉菜单?
我的建议是使用 Bootstrap (http://getbootstrap.com/) 这是一个很棒的工具,它使用 Javascript 和 Jquery 来完成这个,更像是响应式网站和应用程序、更快的反应和 searchable/sortable 个表格。
这个 jsfiddle 是:
https://jsfiddle.net/wh64mLhu/
分解它:
步骤 1
像这样在 header 中添加 Bootstrap CSS :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
步骤 2
像这样在 body 的底部添加 Javascript
<html>
<head>
<!-- Header Code + CSS Here -->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
步骤 3
创建 HTML body 任何你想要的代码,例如我上面分享的 JSFiddle。 这包含 2 个下拉列表。
首先您创建一个 <div>
以表明您将在您的页面中创建一个新的 "division"。
如果您想要使用 <span>
的图像,则可以添加 <Button>
。
完成此操作后,您使用 <ul>
创建列表,并在列表中包含所有元素 <li>
.
我希望这对您有所帮助并说服您使用 Bootstrap :)