嗨，我共有6个标签，基于一个标签的点击，子标签会打开。子选项卡打开后，我希望焦点集中在每个选项卡的第一个子项上。我尝试通过获取第一个标签的ID并尝试在其中获取子标签ID。例如：第一个选项卡是details_basic_info其子选项卡包含tab-details_basic_info。所以我试图通过添加'tab-'和点击它的动态获取的主标签的ID来使details_basic_info获取，但是我未能实现。谁能帮助我，如何做到这一点。
提前致谢。
演示：演示
如果是我，我可能会做类似的事情（尽管方法处理的重复性稍差一些，但是嘿，这只是一个快速的js概念验证示例，例如与bootstrap捆绑在一起，但可以很容易地移植到有角度的），所以您不必只要在可聚焦数组中提供第一个可聚焦元素，它就不会在意。
希望这会有所帮助，加油！
const focusableList = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
focusFirstFocusableChildPoC = (id) => {
const contentPane = document.getElementById(id);
if (contentPane) {
const focusableElements = contentPane.querySelectorAll(focusableList),
firstFocusable = focusableElements[0];
// Typescript will want this to be <HTMLElement>focusableElements[0]; to cast.
window.setTimeout(function () {
// Kick this to the back of the line with the 'ol 0 timeout trick.
firstFocusable ? firstFocusable.focus() : notifyOfFailure();
}, 0);
} else {
notifyOfFailure();
}
}
notifyOfFailure = () => {
alert('NO FOCUS FOR YOU!');
}.tab-content {
padding: 2rem;
}
.tab-content *:focus {
outline: red 3px dotted;
}
.tab-content *:focus:after {
content: '*';
margin-top: 1rem;
color: red;
}<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel1" role="tab" onclick="focusFirstFocusableChildPoC('panel1')">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel2" role="tab" onclick="focusFirstFocusableChildPoC('panel2')">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel3" role="tab" onclick="focusFirstFocusableChildPoC('panel3')">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel4" role="tab" onclick="focusFirstFocusableChildPoC('panel4')">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel5" role="tab" onclick="focusFirstFocusableChildPoC('panel5')">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane show active" id="panel1" role="tabpanel">
<input placeholder="a text input" type="text">
<button>A Button</button>
<input type="checkbox">
<input type="number">
</div>
<div class="tab-pane" id="panel2" role="tabpanel">
<label><input type="checkbox"> Focus testing</label>
<input type="text">
<button>A Button</button>
<input type="number">
</div>
<div class="tab-pane" id="panel3" role="tabpanel">
<button>A Button</button>
<input type="text">
<input type="checkbox">
<input type="number">
</div>
<div class="tab-pane" id="panel4" role="tabpanel">
<a href="#">Test Anchor Link</a>
<button>A Button</button>
<input type="text">
<input type="checkbox">
<input type="number">
</div>
<div class="tab-pane" id="panel5" role="tabpanel">
Nothing here to focus bro...
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句