Jquery addClass（）点击不起作用，什么也不做

Question

嗯，它基本上是在标题中。我无法让我的Jquery脚本向div中添加一个类。

HTML

<div class="nav"> 
<div id="link">Home</div> 
<div id="link">Roms</div> 
<div id="link">FAQ</div> 
<div id="link">About</div> 
</div> 

CSS

.nav { 
    width: 100%; 
    height: 44px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
    margin-bottom: 2px; 
    border-top: 1px solid black; 
    background-image: url(../img/header.jpg); 
    background-size: contain; 
    display: inline-block; 
    opacity: 0.9; 
} 
#link { 
    float: left; 
    color: #f9fcfd; 
    width: 20%; 
    margin-left: 2.5%; 
    margin-right: 2.5%; 
    text-align: center; 
    line-height: 50px; 
    font-family: 'Overpass'; 
    font-size: 100%; 
    font-weight: bolder; 
    transition: 0.3s ease-in-out; 
} 
#link:hover { 
    opacity: 0.7; 
} 
.active { 
    border-bottom: 2px solid #28d7d7; 
    transition: ease-in-out 0.3s; 
    border-radius: 5px; 
} 

JQuery的

$(function() { 
    $("#link").click(function() { 
    $(this).addClass("active"); 
    }); 
}); 

Answer 1

不能重复ID link。将id="link"更改为class="link"。

HTML：

<div class="nav"> 
    <div class="link">Home</div> 
    <div class="link">Roms</div> 
    <div class="link">FAQ</div> 
    <div class="link">About</div> 
</div> 

CSS：

.nav { 
    width: 100%; 
    height: 44px; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); 
    margin-bottom: 2px; 
    border-top: 1px solid black; 
    background-image: url(../img/header.jpg); 
    background-size: contain; 
    display: inline-block; 
    opacity: 0.9; 
} 
.link { 
    float: left; 
    color: #f9fcfd; 
    width: 20%; 
    margin-left: 2.5%; 
    margin-right: 2.5%; 
    text-align: center; 
    line-height: 50px; 
    font-family: 'Overpass'; 
    font-size: 100%; 
    font-weight: bolder; 
    transition: 0.3s ease-in-out; 
} 
.link:hover { 
    opacity: 0.7; 
} 
.active { 
    border-bottom: 2px solid #28d7d7; 
    transition: ease-in-out 0.3s; 
    border-radius: 5px; 
} 

JQUERY：

$(document).ready(function(){ 
    $(function() { 
    $(".link").click(function() { 
    $(this).addClass("active"); 
    }); 
    }); 
}); 

Answer 2

我想你应该更改ID上课，

$(".link").click(function() { 
     $(this).addClass("active").siblings("div").removeClass("active"); 
    });