我有这样的菜单。可以在产品标签
下查看ON MY WEBSITE问题1: 在产品页面下,您将看到下面的图片。
我想要的是当我将鼠标悬停在产品页面上时,我希望第一个项目自动生效。
这是我点击产品页面时会显示的内容。
问题2: 除此之外,如果我将鼠标悬停在第一个项目并将光标移动到右侧窗格,则第一个项目的背景仍然是悬停样式(蓝色)。
目前,如果我将鼠标移动到右侧内容窗格,背景将变为白色。
问题3: 如果我单击左侧列表中的任何项目,则当我将鼠标悬停在列表中的其他项目上时,右侧窗格中的内容不会自动更改。如果我没有点击任何项目它完美地工作。问题是当我点击任何项目时。
我为此编写了一个jquery代码,但我想我错过了一些东西。
$('.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');
});
这是我网站上的项目部分
<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>
答案 0 :(得分:1)
在第127行的css中请粘贴这些更改
.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 > a {color:#fff !important;}