javascript - How to make a list item show/hide another DIV? -
i have 2 lists:
· source selector; · · content of selected source;
i need know how turn each item of source list button, show it's content when clicked, , stay highlighted when selected, itunes smart playlists (for example).
someone can make code me? have jquery already, can't make work...
#tabs { z-index: 1; top: 60px; height: 576px; width: 244px; font-family: gotham, "helvetica neue", helvetica, arial, sans-serif; font-size: 12px; padding-top: 5px; float: left; overflow: scroll; max-height: 591px; left: -40px; outline: dotted; } #source { height: 656px; width: 244px; background: #eee; font-family: gotham, "helvetica neue", helvetica, arial, sans-serif; font-size: 12px; outline: dotted; } #content { height: 300px; width: 500px; text-align:right; overflow-y: scroll; text-align:center; outline: dotted; } .list { font-family: sans-serif; margin: auto; width: 300px; font-size: 12px; max-height: 654px; padding-top: 30px; } .list > li { display:block; float: left; padding: 12px; line-height: 15px; } #tabs > li { display:block; float: bottom; padding: 3px; padding-left: 13px; line-height: 15px; }
<div id="content"> <div id="mrv"> <ul class="list" id:"mrv"> <li> <div id="thumb"><img src="lib/mrv/mrv-40x30_01.png" width="100px" height="75"/></div> <br> <p class="ref">mrv 1</p> <h3 class="empresa">mrv engenharia</h3> <p class="tags"><!-- atenção uso obrigatório de capacetes e calçados de segurança --></p> </li> </ul> </div> </div> <div id="source"> <ul id="tabs"> <li> <img src="" width="32px" height="32px" img class="avatar"/> ambev </li> <li> <img src="" width="32px" height="32px" img class="avatar"/> bianchini </li> <li> <img src="" width="32px" height="32px" img class="avatar"/> mrv engenharia </li> <li> <img src="" width="32px" height="32px" img class="avatar"/> white martins </li> </ul>
Comments
Post a Comment