StackOverflow answer 27183994/1678614

http://stackoverflow.com/a/27183994/1678614 Change a series of divs to track where in a series slideshow is currently at.

by Nelu Malancea

HTML

<div id="content">
    <div id="indicator">
        <div class="dot selected" onClick="location.href='#a1'"></div>
        <div class="dot unselected" onClick="location.href='#a2'"></div>
        <div class="dot unselected" onClick="location.href='#a3'"></div>
        <div class="dot unselected" onClick="location.href='#a4'"></div>
    </div>
</div>

CSS

#content {
    width:100%;
    height:32px;
    background-color:red;
}
#indicator {
    float:left;
    position:absolute;
    display:table;
    left:5.5%;
    top:74%;
    margin:0;
    text-align: center;
    -moz-user-select:none;
    -webkit-user-select:none;
    z-index:10;
}
.dot {
    float:left;
    width:16px;
    height:16px;
    margin-left:8px;
    background-color:#D7D7D7;
}
.dot:hover {
    background-color:#FFF;
    cursor:pointer;
}
.dot.selected {
    background-color:#787878;
}
.dot.unselected {
    background-color:#D7D7D7;
}

JavaScript

$(document).ready(function () {
        $(".dot").click(function () {
            $(this).addClass("selected").removeClass("unselected");
            $(this).siblings().addClass("unselected").removeClass("selected");                
   	    });
	});