jquery 选项卡 - 我无法制作我的;可点击的

Question

这是我的选项卡式界面，我有一个 jsfiddle 这里。

<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();
});

我的问题是我知道如何轻松操作 以便更改悬停或单击时的内容，我已经在 jsfiddle 中完成了这一点。但我想将鼠标悬停或单击

并更改容器中要显示的信息。

Answer 1

您需要做的就是选择

元素并绑定 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/