我正在尝试使jquery .toggleClass与“ this”一起使用，但它不起作用。有人可以迅速指出我正确的方向吗？谢谢
基本上，我只是想将他的以下示例从不活动状态切换为活动状态。
http://jsfiddle.net/6oqe0szq/2/
#contenttab {float: left;position: relative; padding: 10px 15px 10px 15px; ; width: 350px; color: #f1f1f1; font-size: 18px; border-radius: 5px;transition: .2s ease-in-out; margin:10px; text-align: center; letter-spacing: 3px}
.notactive {background: #545b60; transition: .2s ease-in-out;}
.notactive:hover {background:#9adb24; transition: .2s ease-in-out;}
.active {background: #9adb24 !important}
<div id="content_controller">
<div id="contenttab" class="notactive" onclick="left();">Test Info</div>
<div id="contenttab" class="notactive" onclick="middle();">Test Templates</div>
<div id="contenttab" class="notactive" onclick="right();">Test Questions</div>
</div>
function left() {
$( this ).toggleClass( "active" );
}
function middle() {
$( this ).toggleClass( "active" );
}
function right() {
$( this ).toggleClass( "active" );
}
我究竟做错了什么？
提前致谢。
您的JS小提琴没有包含Jquery。
更新小提琴
修复了您的HTML来删除重复的ID，因为它们是唯一的。并删除了您的函数调用。
<div id="content_controller">
<div id="contenttab1" class="notactive">Test Info</div>
<div id="contenttab2" class="notactive">Test Templates</div>
<div id="contenttab3" class="notactive">Test Questions</div>
更新了CSS，以便它使用了类。
.notactive {
float: left;
position: relative;
padding: 10px 15px 10px 15px;
width: 350px;
color: #f1f1f1;
font-size: 18px;
border-radius: 5px;
transition: .2s ease-in-out;
margin:10px;
text-align: center;
letter-spacing: 3px
}
.notactive {
background: #545b60;
transition: .2s ease-in-out;
}
.notactive:hover {
background:#9adb24;
transition: .2s ease-in-out;
}
.active {
background: #9adb24 !important
}
添加了jquery，document.ready和函数调用。
$(document).ready(function () {
$('.notactive').click(function () {
$(this).toggleClass("active");
});
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句