jquery toggleClass無法上班

我試圖讓jquery .toggleClass與「this」一起工作，但它不工作。有人能夠迅速將我指向正確的方向嗎？謝謝jquery toggleClass無法上班

基本上我只想切換從非活動類到活動int他的下面的例子。

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

我在做什麼錯？

在此先感謝。

來源

2014-10-08 spas2k

在你的代碼示例中幾乎一切都是錯誤的。請參閱http://jsfiddle.net/j08691/Lkcqufcc/ – j08691 2014-10-08 15:40:30

'id'應該是唯一的 – 2014-10-08 15:42:14

你的JS小提琴沒有包括jquery。

更新Fiddle

固定的HTML刪除重複編號的，他們是唯一的。並刪除了你的函數調用。

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

來源

2014-10-08 15:44:59

謝謝，作品，我想我可以切換其他類以刪除.active從以前的點擊權？ – spas2k 2014-10-08 15:48:08

http://jsfiddle.net/kf45mcwf/1/：輕微更新到JS。 – 2014-10-08 15:53:02

嘗試

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>

來源

2014-10-08 15:43:01

jquery toggleClass無法上班

回答

相關問題