JavaScript中的多功能切換功能
[英]Multifunction toggle function in javascript
問題描述
我正在使用以下JavaScript代碼根據其鏈接選項對不同的div進行slideUp和slideDown ：
Javascript / jQuery：
function toggleDiv(option) {
$('.content-box').slideUp();
$('#' + option).slideDown(300);
}
HTML：
<li><a class="active" href="javascript:toggleDiv('toggle1')">Toggle 1</a></li>
<li><a href="javascript:toggleDiv('toggle2')">Toggle 2</a></li>
整個代碼運行完美，但是我想做的是將class =“ active”切換到用戶按下的實際鏈接。 我聽說某些屬性方法或類似的方法不具有如何進行的想法。 因此，請您提供任何幫助。
順便說一句，為什么代碼在Firefox / Chrome中可以正常運行，而在Safari中卻表現不佳？
在此處檢查JSFiddle： https ：//jsfiddle.net/3vfwdL34/由於某種原因，它在JSFiddle中不起作用，但是相同的代碼在正常的.html文件中也可以正常工作。
2 個解決方案
解決方案1
3 已采納 2015-04-18 12:20:53
在內聯事件中使用它們之前，需要定義函數。 將代碼包裝在頭部分中，一切對您來說應該工作正常。 並且要添加活動類，請將當前單擊的對象傳遞給方法並添加類。
<head>
<script>
function toggleDiv(option,that) {
$('.active').removeClass('active');
$(that).addClass('active');
$('.content-box').slideUp();
$('#' + option).slideDown(300);
}
</script>
</head>
但是，您可以使用jquery簡化任務：
$('li a').click(function(){
$('.active').not(this).removeClass('active');
$(this).addClass('active');
$('.content-box').slideUp();
$('#toggle'+($(this).parent().index()+1)).slideDown(300);
});
解決方案2
0 2015-04-18 12:21:36
嘗試這樣：
function toggleDiv(option) {
//move the class 'active' to the pressed li
("a").removeClass("active")
$('#' + option).addClass("active")
$('.content-box').slideUp();
$('#' + option).slideDown(300);
}
切換javascript功能
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.