我有这样的菜单。它可以在我的网站上的产品选项卡下查看
首先,请将鼠标悬停在产品上。
如果我将鼠标悬停在列表中的任何项目上,则右侧窗格中的内容会动态更改。但是,如果我单击其中一个并尝试将鼠标悬停在其他项目上,则右侧窗格中的内容不会自动更改。我必须点击其他人。
基本上,单击左侧项目列表中的任何项目后,它都会失去动态行为。
我已经为此写了一个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>
单击链接时,将类hoverblock
添加到所有li
元素中。编写悬停处理程序是为了忽略具有hoverblock
类的li.unrun_tab
元素。
如果您希望在单击产品列表中的某个项目后保持悬停行为,则必须删除添加hoverblock
类的单击处理程序中的代码,或者删除将类".houserblock"排除在悬停处理之外的悬停处理程序中。
目前还不清楚你想要的行为是什么。你所描述的似乎是,你希望点击一个产品,而不对相邻的图像采取任何行动。