Question

我希望能够使用单个按钮事件循环浏览元素列表，就像使用键盘上的选项卡按钮循环浏览表单中的元素一样。

<input type="text" class="ans4" style="border-color:#000;">
<input type="text" class="ans5" style="border-color:#000;">
<input type="text" class="ans6" style="border-color:#000;">

<input type="button" class="tab" value="Tab"/>

Answer 1

下面是一个简单的代码片段，展示如何利用JQuery通过单击显示“活动”选项卡。

$('.tab').click(function(){
  $('.tab').removeClass("active");
  $(this).addClass("active");
  });

.tab{
  display:inline-block;
  background:blue;
  height:50px;
  width:100px;
  }
.active{
  background:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>

下面是一个使用按钮显示此内容并迭代它们的片段。

$('.but').click(function() {
  var len = $('.parent').children().length;
  var next = $('.active').next();
  var thi = next.index();
  $('.tab').removeClass("active");
  if (thi != -1) {
    $(next).addClass("active");
  } else {
    $('.parent').children().first().addClass("active");
  }
});

.tab {
  display: inline-block;
  background: blue;
  height: 50px;
  width: 100px;
}
.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="tab active">1</div>
  <div class="tab">2</div>
  <div class="tab">3</div>
  <div class="tab">4</div>
  <div class="tab">5</div>
</div>
<button class="but">click me!</button>

Answer 2

从answer lee启发，选择“可专注的”＃39;我们可以模拟TAB按下并将焦点移动到下一个元素（并知道哪一个当前处于焦点）。 Fiddle example here，使用以下HTML：

<fieldset class="tab_area">
    <legend>Tab works here</legend>
    <p><input type="text" /></p>
    <p><input type="text" /></p>
    <p><input type="text" /></p>
    <p>More info <a href="#" title="Link">here</a></p>
    <p>
        <select>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </p>
</fieldset>
<p><input type="button" class="tab" value="Click me to Tab" /></p>

和JS：

var focusAbles = $('.tab_area').find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]');
$('.tab').on('mousedown', function (e) {
    e.preventDefault();
    var inFocus = $(':focus');
    if (inFocus.length) {
        var focusIndex = focusAbles.index(inFocus);
        if (focusIndex + 1 < focusAbles.length) {
            focusAbles.eq(focusIndex + 1).focus();
        } else {
            focusAbles.eq(0).focus();
        };
    } else {
        focusAbles.eq(0).focus();
    };
});

Answer 3

Try the below code 

**HTML**

<input type="text" data-tab-index="1" class="answer ans4" style="border-color:#000;"></br></br>
<input type="text" data-tab-index="2" class="answer ans5" style="border-color:#000;"></br></br>
<input type="text" data-tab-index="3" class="answer ans6" style="border-color:#000;"></br></br>

<input type="button" class="tab"id="btnTab" value="Tab"/>

**Java Script**

$(document).ready(function() {
    var tabIndex = 0;
    $("#btnTab").click(function(e) {
        setFocus();
    });

    function setFocus() {

        var isFocusDone = false;
        $(".answer").each(function(index) {
            var dataTabIndex = parseInt($(this).attr("data-tab-index"));
            if ((tabIndex + 1) == dataTabIndex) {
                $(this).focus();
                tabIndex = dataTabIndex;
                isFocusDone = true;
                return false;
            }
        });

        if (!isFocusDone) {
            $(".answer").each(function(index) {
                var dataTabIndex = parseInt($(this).attr("data-tab-index"));
                if (dataTabIndex == 1) {
                    $(this).focus();
                    tabIndex = dataTabIndex;
                    return false;
                }
            });
        }
    }

});

我想在我的html页面中点击按钮，它的工作方式与标签按钮相同

3 个答案: