與jQuery添加類的幫助

我試圖改變我的導航底部邊框顏色，基於哪些鏈接懸停，底部邊框顏色應該改變以匹配懸停鏈接的顏色，當鏈接失去焦點或懸停時，那麼導航底部邊框應該返回到它的原始顏色，下面是我的HTML和jQuery。與jQuery添加類的幫助

<nav> 
      <ul class="<?php echo $ul; ?>"> 
       <li class="home"><a class="home" href="/">Home</a></li> 
       <li class="letters"><a class="letters" href="/product/type/letters">Letters</a></li> 
       <li class="business active"><a class="active business" href="/product/type/business">Business</a></li> 
       <li class="cards"><a class="cards" href="/product/type/cards">Cards</a></li> 
       <li class="gifts"><a class="gifts"href="/product/gifts">Gifts</a></li> 
      </ul> 
     </nav>

/jQuery的/

$('nav li a').hover(function(){ 
      var orginalClass = $(this).parent().parent().attr('class'); 
      $(this).parent().parent().attr('class', ''); 
      var classType = $(this).attr('class'); 
      $(this).parent().parent().addClass(classType); 
     }, 
     function() { 
      $(this).parent().parent().attr('class', ''); 
      $(this).addClass(orginalClass); 
     });

來源

2011-09-20 Udders

var orginalClass=''; 
$('nav li a').hover(function(){ 
    var ul = $(this).closest('ul'); 
    orginalClass = ul.attr('class'); 
    var classType = $(this).attr('class'); 
    ul.removeClass().addClass(classType); 
}, 
function() { 
    ul.removeClass().addClass(orginalClass); 
});

來源

2011-09-20 17:36:48

的問題是你的「originalClass」變量的作用域。它位於第一個懸停函數的本地範圍內，因此在第二個懸停函數中不可訪問。

你應該做的只是添加和刪除第二個CSS類，覆蓋第一個的設置。

來源

2011-09-20 17:32:10

請嘗試以下

$('nav li a').each(function() { 
    var savedClass = $(this).parents('nav').first().attr('class'); 
    $(this).hover(function() { 
    $(this).parents('nav').first().attr('class', $(this).attr('class')); 
    }, function() { 
    $(this).parents('nav').first().attr('class', savedClass); 
    }); 
});

小提琴：http://jsfiddle.net/9J7RS/

來源

2011-09-20 17:36:15 JaredPar

$('nav li a').hover(function(){ 
      var ul = $(this).closest('ul');            
      ul.data('originalClass', ul.attr('class'));    
      ul.removeClass(ul.data('originalClass'));    
      ul.addClass($(this).attr('class')); 
     }, 
     function() { 
      var ul = $(this).closest('ul'); 
      ul.removeClass($(this).attr('class')); 
      ul.addClass(ul.data('originalClass')); 
     } 
);

來源

2011-09-20 17:45:30

與jQuery添加類的幫助

回答

相關問題