jquery - How to select first 'li' automatically after opening drop-down? -
i have menu this. can view on website under products tab
question 1: under product page see picture below.
what want when hover on products page want first items active automatically.
this show when click products page.
question 2: in addition this, if hover on first item , move cursor right pane, first item's background shall still hover style ( blue ).
presently, if move mouse right content pane, background becomes white.
question 3: if click items in left list, content in right pane doesn't change automatically hover on other items in list. if don't click items works perfectly. problem when click items.
i had written jquery code think missing something.
$('.urun_tab').hover( function(){ if($(this).hasclass('hoverblock')) return; else $(this).find('a').tab('show'); }); $('.urun_tab').find('a').click( function(){ $(this).parent() .siblings().addclass('hoverblock'); });
this items part on website
<ul class="nav nav-tabs span4"> <li class="active urun_tab"><a href="#a" data-toggle="tab">seksiyonel kapılar<i class="icon-circle-arrow-right icon-2x icon-white"></i></a> </li> <li class="urun_tab" ><a href="#b" data-toggle="tab">otomatik kapılar<i class="icon-circle-arrow-right icon-2x icon-white"></i></a></li> <li class="urun_tab" ><a href="#c" data-toggle="tab">kepenk ve panjur sistemleri<i class="icon-circle-arrow-right icon-2x icon-white"></i></a></li> <li class="urun_tab" ><a href="#d" data-toggle="tab">hangar kapıları<i class="icon-circle-arrow-right icon-2x icon-white"></i></a></li> <li class="urun_tab" ><a href="#e" data-toggle="tab">otomasyon Ürünleri<i class="icon-circle-arrow-right icon-2x icon-white"></i></a></li> <li class="urun_tab" ><a href="#f" data-toggle="tab">yükleme sistemleri<i class="icon-circle-arrow-right icon-2x icon-white"></i></a></li> <li class="urun_tab" ><a href="#g" data-toggle="tab">yangın kapıları<i class="icon-circle-arrow-right icon-2x icon-white"></i></a></li> </ul>
in css on line number 127 please paste these changes
.navbar .tabs-left > .nav-tabs > li:active, .navbar .tabs-left > .nav-tabs > li:hover, .navbar .tabs-left > .nav-tabs > li:focus, .navbar .tabs-left > .nav-tabs > li:hover > a, .navbar .tabs-left > .nav-tabs > li:active > a,.nav-tabs > li.active { background-color: #477390; color: #ffffff; } .nav-tabs > li.active > {color:#fff !important;}
Comments
Post a Comment