0

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

问题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>
4

1 回答 1

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;}
于 2013-07-22T01:22:43.293 回答