如何獲得經典的懸停，活躍等。行爲與JavaScript

我有這個簡單的問題，我不斷遇到。現在我總是使用相同的解決方案，但我想這不是正確的做法。如何獲得經典的懸停，活躍等。行爲與JavaScript

這裏的情況：

如果有6個環節和6個標籤頁。每個鏈接都會顯示或隱藏帶有javascript的選項卡（display：block/none）。我遇到了正常的html/css方式無法正常工作的問題。我可以設置我的CSS來建立鏈接懸停，但是活動等等不起作用。現在我使用6個獨立的函數來操縱每個鏈接的樣式，以便當人們點擊鏈接5時，鏈接5被加下劃線，其餘不是。

我已經試圖通過使用.this和obj.來重構我的代碼，但是這仍然不會給出我想要的行爲。看來，一旦你用js改變css，css就不能工作了。

我無法想象這是實現正常html鏈接行爲的正確方法嗎？

有沒有人有想法？你如何解決這個問題？這對我自己生成所有內容的新項目成爲一個真正的問題。

來源

2012-02-08 user1197673

你能向我們展示了一下HTML/CSS/JS代碼？ – Humberto 2012-02-08 16:38:16

如果您使用jQuery，則可以使用懸停功能輕鬆創建懸停狀態效果。

if ($("#tab").hasClass('active') { 
    $(".class-of-item-to-show").show(); 
} 

$("#tab1").hover(
    function() { 
    $(".class-of-item-to-show").show(); 
    }, 
    function() { 
    $(".class-of-item-to-show").hide(); 
    } 
);

如果您發佈選項卡和數據的問題，我可以幫你將它設置爲循環顯示..

來源

2012-02-08 16:41:08 Karl

「活躍等」呢？ – Quentin 2012-02-08 16:43:06

你可以發佈你的HTML，所以我可以爲你寫一個jQuery解決方案嗎？ – Karl 2012-02-08 17:01:18

似乎CSS已經不ü一次工作變動與JS的CSS。

這表明（直接通過一些抽象）您正在使用JS來更改元素的屬性.style.*。

這些映射到style屬性，它始終被認爲是「最多specific」。

解決方法是單獨保留style屬性。如果您想更改元素的樣式，請在樣式表中將您的CSS預先寫入。然後使用JavaScript修改元素的className。

這使您可以更好地控制正在應用的樣式。（關於分離問題的一般規則，開發人員通常會更好地將CSS從HTML和JS中分離出來，與HTML分離開來，但是最常出現的情況是無法保留CSS與JS分開）

來源

2012-02-08 16:46:09 Quentin

+1用於更改類，而不是屬性。 – 2012-02-08 17:29:15

我認爲你可以用jQuery實現你想要的功能。

我只是把一個示例代碼，以便您可以有一個想法。對於以下一組鏈接。

<a href ="#" class ="test not" >a</a> 
<a href ="#" class ="test not" >b</a> 
<a href ="#" class ="test not" >c</a>

然後使用jQuery的生活，你可以爲例如任何情況下寫的代碼，我將展示如何刪除和懸停事件

<script type ="text/javascript"> 
    $(document).ready(function() { 
     $('.test').live('hover', function() { 

      $(this).removeClass('not'); 
      $(this).addClass('selected');      

     }); 
    }); 
</script>

添加類像上面的代碼，你可以識別與單獨選擇鏈接。您可以使用任何其它事件爲「懸停」，以及

希望這有助於

來源

2012-02-08 17:22:43 Jayanga

如何獲得經典的懸停，活躍等。行爲與JavaScript

回答

相關問題