2010-02-22 186 views
1

我有一個'功能面板'由服務列表和一個圖像代表每項服務。點擊列表中的h2標籤會從所有li元素中刪除'on'和'noborder'類,然後應用這些類到單擊h2的li元素。jquery點擊功能只適用於第一次點擊ie6

這在除ie6以外的所有瀏覽器中都能很好地工作。在ie6中,它決定爲第一次點擊而工作,但不適用於隨後的點擊。很明顯,我需要這個工作,每次點擊一個h2標籤。任何幫助將不勝感激!

這裏的JavaScript:

$(document).ready(function(){ 
    $("#feature-list h2").click(function(){ 
    var $curr = $(this).parent(); 
    $("#feature-image").html('<img src="/images/feature/' + $(this).attr('title') + '.jpg" />'); 
    $("#feature-list li").removeClass('on'); 
    $("#feature-list li").removeClass('noborder'); 
    $curr.addClass('on'); 
    $curr.prev().addClass('noborder'); 
    }); 
}); 

這裏的CSS:

#feature-wrapper, #feature-title, #feature-image, #feature-list, #feature-tab { 
color: #fff; 
float: left; 
height: 248px; } 

#feature-wrapper { margin-bottom: 1em; } 

#feature-title { 
background-color: #455560; 
position: relative; 
width: 52px; } 

#feature-image { width: 413px; } 

#feature-tab { 
background-color: #f7901e; 
width: 21px; } 

#feature-list { 
background-color: #455560; 
background-image: url(/images/feature-list-bg.gif); 
background-position: top left; 
background-repeat: repeat-y; 
margin-left: 2px; 
width: 456px; 
height: 248px; } 

#feature-list ul { margin: 0; } 

.feature-list p { 
font-size: 1em; 
line-height: 1.2em; 
padding: 5px 15px; 
margin: 0; 
display: none; } 

.feature-list li { 
margin: 0; 
list-style-type: none; } 

.feature-list .on { 
background-color: #f7901e; } 

.feature-list .on p { 
display: block; 
height: 43px; 
padding: 4px 15px; } 

.feature-list .on p.infolink { 
    background-color: #f47a16; 
    font-size: 0.9em; 
    font-weight: bold; 
    height: 13px; 
    margin: 0; 
    padding: 2px 15px 4px; 
    text-align: right; } 

.feature-list .on p.infolink a { color: #fff; } 

.feature-list h2 { 
    background-image: url(/images/feature-title-arrow.png); 
    background-position: -50px 11px; 
    background-repeat: no-repeat; 
    cursor: pointer; 
    padding: 2px 15px; 
    font-size: 1.3em; 
    font-weight: normal; 
    border-bottom: 1px dotted #fff; } 

.feature-list li.on h2 { 
    background-position: 0 11px; 
    cursor: default; 
    font-size: 2em; 
    padding: 0 25px; } 

和HTML:

<div id="feature-wrapper"> 
    <div id="feature-title"> 
    <img src="/images/autodesk.gif" style="position: absolute; bottom: 5px; right: 5px;" /> 
    </div> 
    <div id="feature-image"> 
    <img src="/images/feature/transport.jpg" /> 
    </div> 
    <div id="feature-tab"> 
    <img src="/images/feature-tab.gif" style="margin: 5px;" /> 
    </div> 
    <div id="feature-list"> 
    <ul class="feature-list"> 
     <li class="on"> 
     <h2 title="transport">Transportation</h2> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> 
     <p class="infolink"><a href="#">more information</a></p> 
     </li> 
     <li> 
     <h2 title="industrial">Industrial Machinery</h2> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> 
     <p class="infolink"><a href="#">more information</a></p> 
     </li> 
     <li> 
     <h2 title="oilgas">Oil &amp; Gas</h2> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> 
     <p class="infolink"><a href="#">more information</a></p> 
     </li> 
     <li> 
     <h2 title="renewables">Renewables</h2> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> 
     <p class="infolink"><a href="#">more information</a></p> 
     </li> 
     <li> 
     <h2 title="engineering">General Engineering</h2> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> 
     <p class="infolink"><a href="#">more information</a></p> 
     </li> 
     <li> 
     <h2 title="training">Process &amp; Power</h2> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p> 
     <p class="infolink"><a href="#">more information</a></p> 
     </li>       
    </ul> 
    </div> 
</div> 
+0

你有一個例子網上的任何地方?我已經將代碼的各個部分粘貼到一個簡單的頁面中,並且每次點擊都會觸發jQuery。 – Temple 2010-02-22 12:02:03

回答

0

你有前給出的 '活' 的功能?取而代之的

$("div").click(function() {}); 

嘗試

$("div").live("click", function() { }); 

它連接的情況下,以該元素的所有當前和未來實例。