Question

我正在尝试使用jquery .toggleClass来处理“this”并且它无效。有人能迅速指出我正确的方向吗？感谢

基本上我只想在下面的例子中将类从非活动切换到活动。

#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" );
}

我做错了什么？

提前致谢。

Answer 1

你的JS小提琴并没有包括Jquery。

更新了Fiddle

修复了您的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");
    });
});

Answer 2

试

http://jsfiddle.net/6oqe0szq/7/

请注意html上方出现的脚本标记。此外，您需要传入正在执行的对象。我叫它me

<script>
    function left(me) {
        $( me ).toggleClass( "active" );
    }
    function middle(me) {
        $( me ).toggleClass( "active" );
    }
    function right(me) {
        $( me ).toggleClass( "active" );
    }

</script>
<div id="content_controller">
    <div id="contenttab" class="notactive" onclick="left(this);">Test Info</div>
    <div id="contenttab" class="notactive" onclick="middle(this);">Test Templates</div>
    <div id="contenttab" class="notactive" onclick="right(this);">Test Questions</div>
</div>

jquery toggleClass无法开始工作

2 个答案: