Question

我在这个应用程序中使用无序列表。我想用键盘创建标签导航。我需要创建标签导航。标签一包含一个文本框。填写文本框后。当用户使用键盘移动到下一个选项卡时，按Tab键后将转到下一个选项卡。我正在关注这个以创建标签：http://www.jacklmoore.com/notes/jquery-tabs/

这是我的HTML列表

<ul class="tabNavigation">
        <li><a href="#first">tab-1</a>
        </li>
        <li><a href="#second">tab-2</a>
        </li>
        <li><a href="#third">tab-3</a>
        </li>
    </ul>
    <div id="first">First name:
        <input type="text" name="fname">
        <br>
        <br>Last name:
        <input type="text" name="lname">
        <br>
    </div>
    <div id="second">City 1:
        <input type="text" name="city1">
        <br>
        <br>City 2:
        <input type="text" name="city2">
        <br>
    </div>
    <div id="third">
        <p>tab 3</p>
    </div>

这是我的js

$('ul.tabs').each(function(){
  // For each set of tabs, we want to keep track of
  // which tab is active and it's associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  $active.addClass('active');
  $content = $($active.attr('href'));

  // Hide the remaining content
  $links.not($active).each(function () {
    $($(this).attr('href')).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $active.removeClass('active');
    $content.hide();

    // Update the variables with the new link and content
    $active = $(this);
    $content = $($(this).attr('href'));

    // Make the tab active.
    $active.addClass('active');
    $content.show();

    // Prevent the anchor's default click action
    e.preventDefault();
  });
});

Answer 1

您只需添加tabindex值，如下所示：

Fiddle

<ul class="tabNavigation">
        <li><a href="#first" tabindex=1>tab-1</a>
        </li>
         <li><a href="#second" tabindex=2>tab-2</a>
        </li>
        <li><a href="#third" tabindex=3>tab-3</a>
        </li>
    </ul>
    <div id="first">First name:
        <input type="text" name="fname" tabindex=4>
        <br>
        <br>Last name:
        <input type="text" name="lname" tabindex=5>
        <br>
    </div>
    <div id="second">City 1:
        <input type="text" name="city1" tabindex=6>
        <br>
        <br>City 2:
        <input type="text" name="city2" tabindex=7>
        <br>
    </div>
    <div id="third" tabindex=8>
        <p>tab 3</p>
    </div>

您可以使用小提琴并更改tabindex值以查看它在导航时如何更改顺序。

如何使用键盘在无序列表选项卡中导航

1 个答案: