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

我希望能够使用单个按钮事件在元素列表中循环，就像使用键盘上的tab按钮在表单中循环元素一样

<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"/>

---

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

$（'.tab'）。单击（函数（）{
$（'.tab'）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
.tab{
显示：内联块；
背景：蓝色；
高度：50px；
宽度：100px；
}
.主动{
背景：红色；
}

1.
2.
3.
4.
5
受此启发，通过选择“可聚焦”元素（并知道当前聚焦的元素），我们可以模拟按TAB键并将焦点移动到下一个元素，使用以下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>


Tab在这里工作



更多信息


选择1
选择2



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

var focusAbles=$（'.tab_area'）。查找（'a[href]，area[href]，输入：不（[disabled]），选择：不（[disabled]），文本区域：不（[disabled]），按钮：不（[disabled]），iframe，object，embed，*[tabindex]，*[contenteditable]）；
$（'.tab'）。on（'mousedown'，函数（e）{
e、 预防默认值（）；
var inFocus=$（':focus'）；
if（inFocus.length）{
var focusIndex=可聚焦指数（inFocus）；
if（聚焦索引+1<聚焦参数长度）{
focusAbles.eq（focusIndex+1）.focus（）；
}否则{
focusAbles.eq（0.focus（）；
};
}否则{
focusAbles.eq（0.focus（）；
};
});
尝试下面的代码
**HTML**









**Java脚本**
$（文档）.ready（函数（）{
var指数=0；
$（“#btnTab”）。单击（函数（e）{
setFocus（）；
});
函数setFocus（）{
var IsFocusOne=假；
$（“.answer”）。每个（函数（索引）{
var dataTabIndex=parseInt（$（this）.attr（“数据选项卡索引”）；
if（（tabIndex+1）=dataTabIndex）{
$（this.focus（）；
tabIndex=dataTabIndex；
isFocusDone=true；
返回false；
}
});
如果（！isFocusDone）{
$（“.answer”）。每个（函数（索引）{
var dataTabIndex=parseInt（$（this）.attr（“数据选项卡索引”）；
如果（dataTabIndex==1）{
$（this.focus（）；
tabIndex=dataTabIndex；
返回false；
}
});
}
}
});
我是jquery新手，那么问题又是什么呢？我想制作一个按钮类选项卡。单击按钮时，它的工作原理与键盘上的选项卡按钮相同，所以您想通过单击按钮来模拟按下选项卡？选项卡必须出现在哪里？在每个输入字段中，还是在一个特定的字段中？我认为OP是在寻找一个在特定按键上触发的事件，在本例中是“tab”。下面是对我的问题的回答：“我想制作一个按钮类选项卡。单击按钮时，它的工作原理与键盘上的选项卡按钮相同”否，我不希望在网页中单击功能与选项卡按钮相同的按钮时触发事件
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;
                }
            });
        }
    }

});