2009-11-13 33 views
0

它不會讓我提交多個環節,所以請使用你的想象力,我需要複式鼠標懸停或圖像多個標籤,以便在中間的那個東西是一個圖像你如何使jquery選項卡既鼠標懸停,但點擊打開頁面?

<script type="text/javascript"> 
$(function() { 
$("#tabs").tabs({event: 'mouseover'}).addClass('ui-tabs-vertical ui-helper-clearfix'); 
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-right'); 
$('.openpage').click(function(){ 
    window.location=$(this).attr('title'); 
    }); 
}); 
</script> 

<div id="tabs"> 
<ul> 
<li><a href="#tabs-1" title="content1.html" class="openpage">content1</a></li> 
</ul> 
<div id="tabs-1"><imgimg src="/images/1.jpg" alt=""></div> 
</div> 
+0

提交多個鏈接是什麼意思?你需要多個鼠標懸停標籤,你是什麼意思? – 2009-11-13 08:57:34

+0

你想在鼠標上觸發什麼效果?點擊應該只顯示標籤內容,而不是打開新頁面。 – Steven 2009-11-13 08:58:21

回答

0

此代碼是從jQuery Docs取。

HTML代碼。請注意,我已經爲選項卡添加了類。現在

<div id="tabs"> 
    <ul> 
     <li class="tab1"><a href="#fragment-1"><span>One</span></a></li> 
     <li class="tab2"><a href="#fragment-2"><span>Two</span></a></li> 
     <li class="tab3"><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1"> 
     <p>First tab is active by default:</p> 
     <pre><code>$('#example').tabs();</code></pre> 
    </div> 
    <div id="fragment-2"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
    <div id="fragment-3"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
</div> 

,如果你想添加的標籤多重影響,所有你需要做的是以下幾點:

$(document).ready(function(){ 
    $("#tabs").tabs(); 
    $("#tabs .tab1").click(function() { alert('hello world'); }); 
    }); 

我沒有測試這一點,但我認爲它應該工作。

相關問題