添加只有一次點擊活動的類

Question

我想添加一個活動類，每次點擊一個鏈接，但現在，它只是添加如果我雙擊它。

這裏我的HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<div class="content"> 
<ul> 
    <li><a href="#">Deposit</a></li> 
    <li><a href="#">Account</a></li> 
    <li><a href="#">Credit</a></li> 
</ul> 
    <div class="box active" id="deposit"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
    </div> 
    <div class="box" id="account"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
    </div> 
    <div class="box" id="credit"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
    </div> 

</div> 
<div id="random"> 
    <p>This is a random text</p> 
</div> 

CSS：

li{ 
    list-style:none; 
    color: white; 
    width: 30%; 
    a{ 
    color: white; 
    text-decoration: none; 
    &:hover{ 
     color: blue; 
    } 
    } 

} 
ul{ 
    background: black; 
    padding: 20px 0; 
    text-align: center; 
    display: flex; 
    justify-content: center; 
} 
.box{ 
    height: 200px; 
} 
#deposit{ 
    background: green; 
} 
#account{ 
    background: pink; 
} 
#credit{ 
    background: blue; 
} 
li a.active{ 
    color: red; 
} 

JS：

$(document).ready(function(){ 

    $('div.box').hide(); 
    $('li a').on("click", function(){ 

    if(!$('li a').hasClass('active')){ 
     $(this).addClass('active'); 
    } 
    else{ 
     $('li a').removeClass('active'); 
    } 
    }); 
}); 

這裏我的筆：http://codepen.io/Sidney-Dev/pen/MbyXvP

我如何可以在類主動加入日e鏈接，當我點擊它並從任何其他鏈接刪除相同的類，如果它存在？ 希望你能幫上忙。

Answer 1

剛從a刪除active類，然後添加active類點擊a像下面。

$('div.box').hide(); 
$('li a').on("click", function() { 
    $('li a').removeClass('active'); 
    $(this).addClass('active'); 

    $('div.box').hide(); 
    var index = $(this).parent().index(); 
    $('div.box').eq(index).show(); 
}); 

UPDATED CODEPEN

Answer 2

$(document).ready(function(){ 
 
    
 
    $('div.box').hide(); 
 
    $('li a').on("click", function(){ 
 
     $('li a').not($(this)).removeClass('active'); 
 

 
     $(this).toggleClass('active'); 
 
    }); 
 
});

li{ 
 
    list-style:none; 
 
    color: white; 
 
    width: 30%; 
 
    a{ 
 
    color: white; 
 
    text-decoration: none; 
 
    &:hover{ 
 
     color: blue; 
 
    } 
 
    } 
 
    
 
} 
 
ul{ 
 
    background: black; 
 
    padding: 20px 0; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.box{ 
 
    height: 200px; 
 
} 
 
#deposit{ 
 
    background: green; 
 
} 
 
#account{ 
 
    background: pink; 
 
} 
 
#credit{ 
 
    background: blue; 
 
} 
 
li a.active{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="content"> 
 
<ul> 
 
    <li><a href="#">Deposit</a></li> 
 
    <li><a href="#">Account</a></li> 
 
    <li><a href="#">Credit</a></li> 
 
</ul> 
 
    <div class="box active" id="deposit"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    <div class="box" id="account"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    <div class="box" id="credit"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    
 
</div> 
 
<div id="random"> 
 
    <p>This is a random text</p> 
 
</div>

Answer 3

您應該只修改其點擊發生的元素。你可以做這樣的事情。

$(document).ready(function() { 
 

 
    $('div.box').hide(); 
 
    $('li a').on("click", function(event) { 
 
    let $ele = $(event.target); 
 
    $('li a').not($ele).removeClass('active'); 
 
    $ele.toggleClass('active') 
 
    }); 
 
});

li { 
 
    list-style: none; 
 
    color: white; 
 
    width: 30%; 
 
    a { 
 
    color: white; 
 
    text-decoration: none; 
 
    &: hover { 
 
     color: blue; 
 
    } 
 
    } 
 
} 
 
ul { 
 
    background: black; 
 
    padding: 20px 0; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.box { 
 
    height: 200px; 
 
} 
 
#deposit { 
 
    background: green; 
 
} 
 
#account { 
 
    background: pink; 
 
} 
 
#credit { 
 
    background: blue; 
 
} 
 
li a.active { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <ul> 
 
    <li><a href="#">Deposit</a> 
 
    </li> 
 
    <li><a href="#">Account</a> 
 
    </li> 
 
    <li><a href="#">Credit</a> 
 
    </li> 
 
    </ul> 
 
    <div class="box active" id="deposit"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    <div class="box" id="account"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 
    <div class="box" id="credit"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sunt voluptates reprehenderit similique nostrum eius repudiandae odio eos obcaecati doloremque quam quos, officiis veritatis blanditiis soluta molestiae iusto illo corrupti.</p> 
 
    </div> 
 

 
</div> 
 
<div id="random"> 
 
    <p>This is a random text</p> 
 
</div>

Answer 4

你要刪除現有活動類第一，然後添加上單擊事件的同一類。

$(document).ready(function(){ 
    $('div.box').hide(); 
    $('li a').on("click", function(){ 
     $('li a').removeClass('active'); 
     $(this).addClass('active');  
    }); 
});