点击通过jquery选项卡时,有序列表的数字变为0

前端之家收集整理的这篇文章主要介绍了点击通过jquery选项卡时,有序列表的数字变为0前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个页面上有jQuery标签.在这些选项卡中是一个有序列表.

这是我的HTML代码

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

这是我的javascript:

$(function(){
$(“#tabs”).tabs();
});

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

当我在IE9中查看它时,我从第一个选项卡单击到第二个选项卡,然后再次返回到第一个选项卡,数字全部更改为“0”

有谁知道我做错了什么,或者如何解决这个问题?

解决方法

这似乎是IE本身看到这个相关 question的问题.

通过在再次选择选项卡时重新创建列表项上的计数器,我能够解决此问题.

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

查看此jsFiddle获取工作示例

猜你在找的jQuery相关文章