0

我有这样的菜单。可以在产品选项卡下的我的网站上查看

首先，请将鼠标悬停在PRODUCTS上。

如果我将鼠标悬停在列表中的任何项目上，右窗格中的内容会动态更改。但是，如果我单击其中一个并尝试将鼠标悬停在其他项目上，则右窗格中的内容不会自动更改。我必须点击其他人。

基本上，在单击左侧项目列表中的任何项目后，它会失去其动态行为。

我为此编写了一个 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>
4

1 回答 1

1

单击链接时，您正在将类添加hoverblock到所有元素。li编写悬停处理程序以忽略li.unrun_tab具有hoverblock该类的元素。

如果您希望在单击产品列表中的某个项目后保持悬停行为，则必须删除单击处理程序中添加hoverblock类的代码，或者删除悬停处理程序中排除类 '.hoverblock 的代码` 来自悬停处理。

有点不清楚你想要的行为是什么。您所描述的似乎是您希望单击产品对相邻图像不做任何事情。

于 2013-07-22T02:53:51.797 回答