我的菜單項列表，我想添加同一類，當用戶點擊任何李或添加類懸停李。如何添加和刪除類當用戶點擊，鼠標懸停在一個鏈接

我有一個像下面的菜單項：

$('#menu li').click(function() { 
    $('#menu li').not(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

$("#menu li").hover(
       function() { 
        $(this).addClass('active'); 
       }, 
       function() { 
        $(this).removeClass('active'); 
       });

http://jsfiddle.net/866pzu47/173/

的問題是，如果用戶點擊「禮」添加到李類，當鼠標移到我需要刪除添加的類由於之前的用戶點擊或再次添加了主動iems。

來源

2017-02-01 CodeMan

懸停你可以直接使用：懸停不知道你要求的是這個http://jsfiddle.net/866pzu47/175/？ –

@hover類我需要顯示引導程序圖標... – CodeMan

@kukkuz：我修改了 – CodeMan

這裏有一個簡單的方法來做到這一點

$('#menu li').click(function() { 
    $('#menu li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$("#menu li").hover(function() { 
    $('#menu li').removeClass('active'); 
    $(this).addClass('active'); 
});

jsFiddle Demo

但你的要求不明確儘可能多借鑑的jsfiddle所以請看看，讓我們知道你需要什麼在此範圍內。

編輯

我剛剛加入到不同的類別之一點擊活躍，另一個用於懸停活躍所以儘量懸停，然後點擊你會發現這兩個函數

<script> 
$('#menu li').click(function() { 
    $('#menu li').removeClass('clickactive hoveractive'); 
    $(this).addClass('clickactive'); 
}); 

$("#menu li").hover(function() { 
    $('#menu li').removeClass('hoveractive clickactive'); 
    $(this).addClass('hoveractive'); 
}); 
</script> 

<style> 
.hoveractive{ 
    color:red; 
} 
.clickactive{ 
    color: green; 
} 
</style>

Here之間的不同是一個更新的jsfiddle 。

來源

2017-02-01 05:03:08

function myfun() { 
    $('#menu li').removeClass('active'); 
    $(this).addClass('active'); 
} 
$('#menu li').click(myfun); 
$("#menu li").hover(myfun);

同一個以上，但不保持重複...

來源

2017-02-01 05:08:08

這將爲ü工作..

$(document).ready(function(){ 

    $('#menu li').click(function() { 
    $('#menu li').removeClass('active'); 
    $(this).addClass('active'); 
}); 

$("#menu li").hover(function(){ 
    $('#menu li').removeClass('active'); 
    }, function(){ 
    $(this).addClass('active'); 
    }); 
})

來源

2017-02-01 05:09:02 Minksmnm

增加點擊次數和懸停類是不是一個好主意。它看起來像你試圖爲移動和桌面有funcitonality。

嘗試根據屏幕大小檢查文檔寬度和運行代碼。

var docWidth = $(window).width(); 

if (docWidth <= 767) { 
    $('#menu li').click(function() { 
     $('#menu li').not(this).removeClass('active'); 
     $(this).addClass('active'); 
    }); 
} 
else { 
    $('#menu li').click(function() { 
     $(this).addClass('active'); 
    }, function() {//note add callback function 
     $(this).removeClass('active'); 
    }); 
}

來源

2017-02-01 05:10:26

你還沒有意識到這一點，但你$('#menu li').click事件實際上是調用和類不改變，但你懸停出li的mouseout效應發生和active類被刪除。我的建議是創建一個新類active1，它與active相同，當你點擊一個li顏色確實只改變mouseout效果不會從它移除活動類，因爲它不在那裏。

  $("#menu li").click(function() { 
       $("#menu li").not(this).removeClass("active1"); 
       $(this).addClass("active1"); 
      }); 

      .active1{ 
       color: red; 
      }

來源

2017-02-01 05:13:39 rexroxm

如果要懸停但 active類仍然存在，您可以使用這一個，你可以減少腳本功能以及

。

$('#menu li').click(function() { 
 
    $('#menu li').not(this).removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

li{ 
 

 
    color: blue; 
 
} 
 
li:hover{ 
 

 
    color: red; 
 
} 
 
.active{ 
 
    color:red; 
 
    //background-image:''; 
 
    } 
 
.active{ 
 
    color:red; 
 
    //background-image:''; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="menu"> 
 
<li>one</li> 
 
<li>one</li> 
 
<li>one</li> 
 

 
</ul>

來源

2017-02-01 05:20:47

嘗試創建另一個名爲css類「點擊」，並添加點擊活躍懸停該類。

$('#menu li').click(function() { 
    //alert("chala BC"); 
$('#menu li').not(this).removeClass('clicked'); 
$(this).addClass('clicked'); 
}); 

$("#menu li").hover(
      function() { 
       $(this).addClass('active'); 
      }, 
      function() { 
       $(this).removeClass('active'); 
      });

來源

2017-02-01 06:33:20

如何添加和刪除類當用戶點擊，鼠標懸停在一個鏈接

回答

編輯

相關問題