JQuery вкладки - у меня проблемы с тем, чтобы мой <li>кликабельным - PullRequest
Новая
       37

JQuery вкладки - у меня проблемы с тем, чтобы мой <li>кликабельным

1 голос
/ 21 декабря 2011

Это мой интерфейс с вкладками, у меня есть 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();
});

Моя проблема в том, что я знаю, как легко манипулировать <a> для изменения содержимого при наведении или щелчке, что я уже сделал в jsfiddle. Но я хочу навести курсор или щелкнуть <li> и изменить отображаемую в контейнере информацию.

1 Ответ

0 голосов
/ 21 декабря 2011

Все, что вам нужно сделать, это выбрать элементы <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/

...