toggleClass（）不適用於div

我一直在網站上工作並遇到問題。在我的FAQ中，我有一個下拉菜單和一個提交按鈕來鏈接到FAQ的不同部分。這工作完美。提交按鈕觸發一個javascript函數，該函數動態鏈接到頁面上的適當錨點。另外，我希望下拉菜單中選擇的問題以橙色突出顯示。我突出顯示了，但只是在閃爍之前一秒鐘。我想知道如何讓突出顯示保持，而不是閃光？我不確定爲什麼會發生這種情況。另外，我怎樣才能讓使用jQuery的突出顯示淡出？我知道如何通過隱藏div然後使用.fade（）來實現，但這會導致所有文本消失。非常感謝！toggleClass（）不適用於div

繼承人小提琴：http://jsfiddle.net/UjPtv/但它不能完全工作，因爲當你提交它時出現了一個錯誤。我認爲這是因爲jsfiddle不允許提交，即使這個提交只是運行一些JavaScript。如果您知道解決方法，請讓我知道，以便我可以更新鏈接！謝謝！

的javascript：

var toggled = 0; 
function jump_to (location) { 
if(toggled == 0){ 
    toggled = 1; 
    window.location.href = "#" + location; 
    $("#wrap"+location).toggleClass("wraps_active"); 
} 
}

HTML：

<div id = "main"> 
     <h2 class = "center">FACTS YOU NEED</h2> 
     <h3>The Core Facts You Want To Know</h3> 
     <div class = "border"> 
     <p> 
      Jump To: 
       <form onsubmit = "jump_to(jump_list.value)"> 
       <select name = "jump_list"> 
       <option value="1">Who can go to the camp?</option> 
       <option value="2"><a href = "contact_information.html">When do we check in and out?</a></option> 
      </select> 
      <input type = "submit" value = "Go"/> 
      </form> 
     </p> 
     </div> 
     <div id = "wrap1" class = "wraps"> 
     <h4><a name = "1"></a>Who can go to the camp? </h4> 
     <p> 
      The camp is for kids ages 9 to 17 years old who have been diagnosed with celiac disease, a condition that requires life-long adherence to a gluten-free diet. Given limited space, we are unable to accommodate kids on gluten-free diets for other reasons (such as autism spectrum disorders). Campers ages 16-17 years may choose to volunteer as junior counselors. Junior counselors assist the adult volunteers, and for first session junior counselors need to arrive a day early (on Monday) for the staff orientation and training. If there are more junior counselor applicants than there is available space, priority is given based on age, gender-need, and prior camp experience. 
     </p> 
     </div> 
     <div id = "wrap2" class = "wraps"> 
     <h4><a name = "2"></a>When do we check in and out?</h4> 
     <p> 
      Check-in: Please see the "Calendar" on the left hand side of the website for details about each camp.Please do not arrive early. 
      </br><br/> 
      Check-out: All campers must be checked out by the stated time so camp can be prepared for the next group, see the "Calendar" for date information. 
     </p> 
     </div> 


    </div>

CSS：

.wraps{ 
border-bottom:1px dashed #C3C3C3; 
} 
.wraps_active{ 
border-bottom:1px dashed #C3C3C3; 
background:#FFB280; 
}

來源

2013-01-02 nman

'.toggleClass（）'方法的第二個參數接受一個布爾值，以確定的方式切換它。 –

每次提交表單時，請清理所有活動的包裝類，並僅將其添加到所選的包裝類中。

$('form input[type=submit]').click(function(e) { 
    e.preventDefault(); 

    var location = $('select[name=jump_list]').val(); 
    window.location.href = "#" + location; 

    $('.wraps').removeClass('wraps_active'); 
    $("#wrap"+location).addClass("wraps_active"); 
});

這裏是Fiddle。

來源

2013-01-02 07:22:15 halilb

哇，這工作太棒了！非常感謝！！！！！！ @halilb – nman

請儘量將

$("#wrap"+location).addClass("wraps_active");

而不是toggleClass

來源

2013-01-02 07:10:38

感謝您的迴應！我試過了，但同樣的問題依然存在。 – nman

toggleClass（）不適用於div

回答

相關問題