2

我有一系列按钮创建为 li 我希望用户能够单击：

<ul class="item_list">
<li class="item_button" id="128" style="color: #4bb2c5" data-seq= "0">1</li>
<li class="item_button" id="129" style="color: #EAA228" data-seq= "1">2</li>
<li class="item_button" id="130" style="color: #c5b47f" data-seq= "2">3</li>
<li class="item_button" id="131" style="color: #579575" data-seq= "3">4</li>
<li class="item_button" id="132" style="color: #839557" data-seq= "4">5</li>
<li class="item_button" id="133" style="color: #958c12" data-seq= "5">6</li>
<li class="item_button" id="134" style="color: #953579" data-seq= "6">7</li>
<li class="item_button" id="135" style="color: #4b5de4" data-seq= "7">8</li>
</ul>

这是相关的CSS：

.item_button{
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    background-color:#ededed;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
        float:left;
    font-size:10pt;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
        width:120px;
        margin-top:12px;
}

.item_button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );

    background-color:#dfdfdf;
}
.item_button:active {
    position:relative;
    top:1px;
}

...这是我的 jQuery 处理程序：

$('.item_list li').click(function(){
    $('.item_list li').attr('class', 'item_button');
    $(this).attr('class','item_button_selected')
  });

这一切在 Chrome 和 Safari 中都可以正常工作。用户可以单击 li 中的任何位置，它会“单击”。在 IE 中，只有当用户直接点击 li 内的文本本身时，才会捕获悬停行为和点击，即“1”、“2”等。我错过了什么？

4

1 回答 1

0

首先，您不应该重复自己，因此请尝试更新您的 jQuery 以在单个变量中使用 $(this)：

$('.item_list li').click(function() {

    var $this = $(this);

    $this.attr('class', 'item_button');
    $this.attr('class', 'item_button_selected');
});

其次，我同意 elclanrs，你应该尝试使用 toggleClass()。

关于您的 IE 问题，它适用于 IE9 和 IE10。哪个版本不适合您？你用的是IE的兼容模式吗？

于 2013-12-13T11:33:47.297 回答