Question

这是我的标签界面，我有一个jsfiddle here。

<div class="tabs">
  <!-- tabs -->
  <ul class="tabNavigation">
    <li><a href="#corporations">Corporations</a></li>
    <li><a href="#non-profit">non-profit</a></li>
    <li><a href="#growing-businesses">growing-businesses</a></li>
    <li><a href="#arrange">Arrange a meetup</a></li>
  </ul>

  <!-- tab containers -->
  <div id="corporations">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="non-profit">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="growing-businesses">
    <p>Ut enim ad minim veniam</p>
  </div>
  <div id="arrange">
    <p>Sed do ad minim ipsum dolor sit</p>
  </div>
</div>

这是我的jquery，这很简单。

$(function () {
    var tabContainers = $('div.tabs > div');

    $('div.tabs ul.tabNavigation a').click(function () {
        tabContainers.hide().filter(this.hash).show();

        $('div.tabs ul.tabNavigation a').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

我的问题是我知道如何轻松操作<a>以便更改悬停或点击时的内容，这是我在jsfiddle中已经完成的。但我想悬停或点击<li>并更改容器中的信息以显示。

Answer 1

您需要做的就是选择<li>元素并绑定click事件处理程序，与链接相同：

$(function () {
    var tabContainers = $('div.tabs > div');

    //here I am targeting the `<li>` elements instead of the `<a>` elements
    $('div.tabs ul.tabNavigation li').click(function () {

        //to get the "hash" you need to select the child `<a>` element of this `<li>` element
        var the_hash = $(this).children().attr('href');
        tabContainers.hide().filter(the_hash).show();

        //and here the `selected` class is being added and removed from the `<li>` elements rather than the `<a>` elements
        $('div.tabs ul.tabNavigation li').removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(':first').click();
});

以下是您的jsfiddle的更新版本：http://jsfiddle.net/3EyCT/5/

jquery标签 - 我无法点击<li>点击</li>

1 个答案: