jquery - How can i change my menu to show the active menu -

jquery - How can i change my menu to show the active menu -

can tell me in way can alter jquery code in order active tab concept. is: 1 shows menu active @ time.

i have included html , css , js files have used.

html :

<ul class="au-img">enter code here <li><a id="andrew" ><img id="aila" src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/grid-layout-project-128.png" alt="this"></a></li> <li><a id="john" ><img id="aila1" src="https://cdn0.iconfinder.com/data/icons/thin-time-date/57/thin-026_time_clock_watch-256.png" alt="thisone"></a></li> <li><a id="nate" ><img id="aila2" src="https://cdn0.iconfinder.com/data/icons/cosmo-mobile/40/book-512.png" alt="thisone2"></a></li> </ul> <div class="about-andrew hide"> <h3>grid</h3> <p>this grid clicked</p> </div> <div class="about-john hide"> <h3>clock</h3> <p>this clock clicked</p> </div> <div class="about-nate hide"> <h3>book</h3> <p>this book clicked</p> </div>

css:

* { margin:0;padding:0; } body { background:#e9eef5; } ul { background-color:orange; } li { display:inline-block; float:left; width:33.33%; background:#e6e6e6; min-height:35px; text-align:center; vertical-align:middle; } img { cursor: pointer; } .default-text { font:20pt 'georgia'; margin:20px auto 0; text-align:center; } div { clear:both; position:relative; margin:0px auto 0; text-align:center; width: 100%; } h3 { font-size: 2em; margin-bottom: 20px; } .hide { display: none; } #aila { width:20px; height:20px; padding-top:7px; } #aila1 { width:20px; height:20px; padding-top:7px; } #aila2 { width:20px; height:20px; padding-top:7px; }

jquery:

$('.au-img a').on("click", function(e) { var $this = $(this), $id = $this.attr('id'), $class = '.' + $('.about-' + $id).attr('class').replace('hide', ''); $('.default-text').addclass('hide'); $('.about-' + $id).removeclass('hide'); $('div[class*=about]').not($class).addclass('hide'); });

try this:

class="snippet-code-js lang-js prettyprint-override">var flag; $('.au-img a').on("click", function(e) { var $this = $(this), $id = $this.attr('id'), $class = '.' + $('.about-' + $id).attr('class').replace('hide', ''); $('.default-text').addclass('hide'); $('.about-' + $id).removeclass('hide'); $('div[class*=about]').not($class).addclass('hide'); $(this).parent().css( "background-color", "red" ); $(flag).parent().css( "background-color", "#e6e6e5" ); flag=this; }); class="snippet-code-css lang-css prettyprint-override">* { margin:0;padding:0; } body { background:#e9eef5; } ul { background-color:orange; } li { display:inline-block; float:left; width:33.33%; background:#e6e6e5; min-height:35px; text-align:center; vertical-align:middle; } img { cursor: pointer; } .default-text { font:20pt 'georgia'; margin:20px auto 0; text-align:center; } div { clear:both; position:relative; margin:0px auto 0; text-align:center; width: 100%; } h3 { font-size: 2em; margin-bottom: 20px; } .hide { display: none; } #aila { width:20px; height:20px; padding-top:7px; } #aila1 { width:20px; height:20px; padding-top:7px; } #aila2 { width:20px; height:20px; padding-top:7px; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="au-img"> <li><a id="andrew" ><img id="aila" src="https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/grid-layout-project-128.png" alt="this"></a></li> <li><a id="john" ><img id="aila1" src="https://cdn0.iconfinder.com/data/icons/thin-time-date/57/thin-026_time_clock_watch-256.png" alt="thisone"></a></li> <li><a id="nate" ><img id="aila2" src="https://cdn0.iconfinder.com/data/icons/cosmo-mobile/40/book-512.png" alt="thisone2"></a></li> </ul> <div class="about-andrew hide"> <h3>grid</h3> <p>this grid clicked</p> </div> <div class="about-john hide"> <h3>clock</h3> <p>this clock clicked</p> </div> <div class="about-nate hide"> <h3>book</h3> <p>this book clicked</p> </div>

jquery css