如何使用jquery保存所選asp按鈕的css類？

我在頁面上有一些按鈕，大約有10個asp按鈕。我正在使用CSS類來實現按鈕鼠標懸停和鼠標離開的效果。我面臨的問題是，當我點擊一個按鈕時，我想將CSS類應用於單擊的按鈕並想保留它，但是當我將鼠標懸停在該按鈕上時，類將被刪除。其實，我想要禁用選定（點擊）按鈕的類的變化。所以，如果我有5個按鈕btn1, btn2, btn3, btn4, btn5和我選擇的按鈕是btn3，如果我懸停在btn3並離開這個btn3，它不應該鬆動它的CSS類。如何使用jquery保存所選asp按鈕的css類？

這是我應用CSS類代碼：

<script src="jquery-1.6.2.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 

      // mouse hover 
      $("[id^='MangoPager_btn']").mouseenter(mouseenterfunction); 
      // mouse leave 
      $("[id^='MangoPager_btn']").mouseleave(mouseleavefunction);   

     }); 

     function mouseleavefunction() { 

      $(this).removeClass("pagerbtnMouseEnter").addClass("buttonclass"); 
     } 

     function mouseenterfunction() { 

      $(this).addClass("pagerbtnMouseEnter"); 
     } 

    </script>

，並在單擊按鈕時，我正在使用的代碼：

 private void SetSelectedButtonStyle() 
      { 
ResetCss(): 
       //selectedItemClass 
       Button selectedButton = FindButtonWithText(_currentPageIndex.ToString()); 
       if (selectedButton != null) 
       { 
        selectedButton.CssClass = "pagerbtnMouseEnter"; 
       } 
      } 

private void ResetCss() 
     {    

      for (int i = 1; i <= MAX_PAGE_SIZE; i++) 
      { 
       Button btn = (Button)FindControl(string.Format("btn{0}", i)); 
       btn.CssClass = "buttonclass"; 
      } 
     }

我必須阻止所選按鈕從改變當我做鼠標懸停或鼠標離開時的CSS類。

來源

2011-08-03 Embedd_Khurja

你按鈕3種狀態： - 正常 - 懸停 - 選擇

爲什麼你只有2班？如果你想這樣做，你應該有另一個css類的按下狀態，然後在懸停功能，你會檢查你的按鈕是否有選定的類，如果它沒有做任何事情。

但是，難道你不知道懸停狀態只能通過CSS嗎？

.myClass 
{ 
    background-color : blue; 
} 

.myClass:hover 
{ 
    background-color : red; 
}

這將改變一個myclass元素的背景顏色，只要你將其懸停。

所以你能做的就是刪除所有jQuery代碼爲的mouseenter /鼠標離開

的點擊狀態創建一個新類。

.buttonClass 
{ 
    // Your button style 
} 
.buttonClass:hover 
{ 
    // Your mousein button style 
} 
.buttonClicked 
{ 
    // Your selected/clicked button style 
}

而且你的asp.net頁面上中庸之道與buttonClicked類取代.button類將點擊的按鈕:)

來源

2011-08-03 14:49:54

那麼你可以保存被點擊的對象按鈕的ID：

var clickedButtons = {}; 

$("[id^='MangoPager_btn']").click(function(){ 
    clickedButtons[this.id] = true; 
});

然後，修改鼠標離開檢查，如果按鈕被點擊和刪除類只有未被點擊它：

function mouseleavefunction() { 
     if (clickedButtons[this.id] !== true){ 
      $(this).removeClass("pagerbtnMouseEnter").addClass("buttonclass"); 
      } 

    }

來源

2011-08-03 14:44:12

會是這樣的工作嗎？


$(document).ready(function(){ 
    $("[id^='MangoPager_btn']").live(function() { 
     click: function() { 
      $(this).addClass("clickClass"); 
     }, 
     mouseover: function() { 
      $(this).addClass("pagerbtnMouseEnter"); 
     }, 
     mouseout: function() { 
      $(this).removeClass("pagerbtnMouseEnter") 
      $(this).addClass("clickClass"); 
     } 
    }); 
});

來源

2011-08-03 14:48:57

如何使用jquery保存所選asp按鈕的css類？

回答

相關問題