jQuery addClass example

Change class name on click in jQuery

by ci83rtda

HTML

<div id="container">
    <select name="" id="select">
        <option value="1">item-1</option>
        <option value="2">item-2</option>
        <option value="3">item-3</option>
        <option value="4">item-4</option>
        <option value="5">item-5</option>
        <option value="6">item-6</option>
        <option value="7">item-7</option>
        <option value="8">item-8</option>
        <option value="9">item-9</option>
        <option value="10">item-10</option>
        <option value="11">item-11</option>
        <option value="12">item-12</option>
        <option value="13">item-13</option>
        <option value="14">item-14</option>
    </select>
    
    
    <div id="1">1</div>
    
    <div id="2">2</div>
    
    <div id="3">3</div>
  
    <div id="4">4</div>
    
    <div id="5">5</div>
    
    <div id="6">6</div>
    
    <div id="7">7</div>
    
    <div id="8">8</div>
    
    <div id="9">9</div>
    
    <div id="10">10</div>
    
    <div id="11">11</div>
    
    <div id="12">12</div>
   
    <div id="13">13</div>
    
    <div id="14">14</div>
    
</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
 
}

div {
  padding-bottom: 50px;
}

.flashit{
  color:#f2f;
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; } 
	50% { opacity: .1; } 
	100% { opacity: 1; }
}

JavaScript

function ScrollToDivId(id) {
    $("div").removeClass("flashit");
    $("#" + id).addClass("flashit");
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}



$('#select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ScrollToDivId(valueSelected);
});