Zahlen einer geordneten Liste werden zu 0, während Sie durch die Tabs von jquery klicken

Question

Ich habe eine Seite mit jQuery-Registerkarten. In diesen Registerkarten befindet sich eine geordnete Liste.

Dies ist mein HTML-Code:

<div id="tabs"> 

    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 

    <div id="tabs-1"> 
     <ol start="50"> 
      <li>Bibendum Elit</li> 
      <li>Vehicula</li> 
      <li>Amet Bibendum Ultricies</li>   
     </ol> 
    </div> 

    <div id="tabs-2"> 
     <ol> 
      <li>Sollicitudin Cras Vehicula</li> 
      <li>Vulputate Euismod</li> 
      <li>Ridiculus Vehicula Pharetra Nullam</li>   
     </ol> 
    </div> 

    <div id="tabs-3"> 
     <ol> 
      <li>Ullamcorper Parturient</li> 
      <li>Tristique Mollis Venenatis Vehicula</li> 
      <li>Vulputate Bibendum</li>   
     </ol> 
    </div> 
</div> 

und das ist mein javascript:

$(function() { $("#tabs").tabs(); });

See: http://jsfiddle.net/2ewzz/1/

Wenn ich dies in IE9 zu sehen, und ich klicke aus die erste Registerkarte auf die zweite Registerkarte und dann wieder zurück auf die erste Registerkarte, die Zahlen werden alle auf "0"

geändert

Weiß jemand, was ich falsch mache, oder wie man dieses Problem löst?

Answer 1

Dies scheint ein Problem in IE selbst zu sein, das sich auf diese verwandte question.

Ich konnte dies beheben, indem Sie den Zähler auf den Listenelementen erneut erstellen, wenn Sie die Registerkarte erneut auswählen.

$(function() { 
    $("#tabs").tabs({ 
     select: function(event, ui){ 
      var ol = $($(ui.panel).children()[0]); 
      setTimeout(function(){ 
      ol.children().css("counter-reset", "item") 
      }, 1); 
     } 
    }); 
}); 

Sehen Sie sich diese jsFiddle für ein funktionierendes Beispiel

Answer 2

http://www.w3schools.com/tags/att_ol_start.asp Es funktioniert mit IE9 Compat-Modus.

Answer 3

Basierend auf @sriniris Antwort, wenn Sie mehrere Listen haben:

<script type="text/javascript"> 
    $(function() { 
     $("#tabs").tabs({ 
      activate: function (event, ui) { 
       $(".olReset").each(function() { 
        var ol = $(this); 
        setTimeout(function() { 
         ol.children().css("counter-reset", "item") 
        }, 1); 
       }); 
      } 
     }); 
    }); 
</script> 

Nur .olReset Klasse Ihren Listen.

Außerdem wurde select abgeschrieben.

Answer 4

ich auch dieses Problem hatte, aber durch einen Zufall meine IT-Abteilung diesen Patch bereitgestellt http://support.microsoft.com/kb/2909921 (Updates IE9 aktualisieren Version 9.0.24) und das Problem ging weg