html 单击时添加类，然后将其删除，仅将类应用于要单击的当前项

Posted 2021-05-11

http://stackoverflow.com/questions/19520446/add-and-remove-a-class-on-click-using-jquery

1)
current will have css that makes the item selected

<script>
$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current'); // remove current class from all items, except ...
    $(this).addClass('current');  // ... this one, the current one
});
</script>




2) 
HTML+PHP:
<?php $images = get_field('galleryslider'); ?>
	   
<div id="slider" class="flexslider">

  <ul class="slides">
    <?php 
	    $n = 1 ;
	    foreach( $images as $image ): 
	?>

    <li>
    	<div class="gal_number"><?php echo '(' . $n . ')' ;  ?></div>
		<img title="<?php echo $n ;  ?>" src="<?php echo $image['url']; ?>" />
    </li>
    <?php $n++ ; endforeach; ?>

    </ul>

</div>

<script>
jQuery(document).ready( function () { 
	jQuery('.gal_thumb').click( function () {
		console.log("clicked") ;
		jQuery('.gal_thumb.gal_thumb_active').removeClass('gal_thumb_active') ;
		jQuery(this).addClass('gal_thumb_active') ;
	}) ;
		
}) ; 
</script>

CSS:


.gal_number {
    color: #ff6602;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}


.gal_thumb_active {
	border-bottom: solid 5px #ff6602 ;
}