Hinzufügen Klasse aktiv nur mit einem Klick

Question

Ich versuche, eine Klasse aktiv, jedes Mal, wenn Sie auf einen Link klicken, aber für jetzt, es ist nur hinzufügen, wenn ich doppelklicken Sie darauf.

Hier ist mein 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'); 
    } 
    }); 
}); 

Hier mein Stift: http://codepen.io/Sidney-Dev/pen/MbyXvP

Wie kann ich die Klasse hinzufügen aktiv th Der Link, wenn ich darauf klicke und die gleiche Klasse von einem anderen Link entferne, wenn es existiert? Hoffe, du kannst helfen.

Answer 1

Entfernen Sie einfach active Klasse von allen a und fügen Sie dann active Klasse auf geklickt a wie folgt.

$('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

Sie sollten nur die Elemente ändern, auf dem Klick passiert ist. Du könntest so etwas tun.

$(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

Sie haben die vorhandenen aktive Klasse zuerst zu entfernen, dann die gleiche Klasse auf Click-Ereignis hinzuzufügen.

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