我想要一个按钮在我的 html 页面中单击按钮，它的工作原理与选项卡按钮相同

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

受到lee 中的answer 的启发，通过选择“可聚焦”元素（并知道哪个元素当前处于焦点），我们可以模拟 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 2

下面是一个简单的 sn-p，展示了如何利用 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>

---

下面是一个 sn-p，它使用一个按钮并遍历它们。

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

});