0

こんなメニューがあります。MY WEBSITEのPRODUCTSタブで表示できます。

質問 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

css の 127 行目にこれらの変更を貼り付けてください

    .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 に答える