Question

我有一个'功能面板'，由一系列服务和一个代表每项服务的图像组成。单击列表中的h2标记将从所有li元素中删除“on”和“noborder”类，然后应将这些类应用于单击h2的li元素。

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

Answer 1

你之前有过'live'功能吗？而不是

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

尝试

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

它将事件附加到元素的所有当前和未来实例。

jquery点击功能仅适用于ie6中的第一次点击

1 个答案: