Question

我有一个包含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”

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

Answer 1

这似乎是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了解工作示例

Answer 2

http://www.w3schools.com/tags/att_ol_start.asp 它适用于IE9 Compat模式。

Answer 3

基于@sriniris的回答，如果您有多个列表：

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

只需将.olReset课程应用到您的列表中即可。

此外，select已被折旧。

Answer 4

我也有这个问题，但巧合的是我的IT部门部署了这个补丁http://support.microsoft.com/kb/2909921（更新IE9以更新版本9.0.24）并且问题消失了

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

4 个答案: