[英]Linking to a specific tab from a href link
I'm trying to link index.html with a href link to players.html -- > Pele tab. 我正在尝试将index.html与href链接链接到players.html-> Pele选项卡。
Here is my index.html code: 这是我的index.html代码:
<a href="players.html#client-panel-2"></a>
and my players.html 和我的players.html
<ul data-tabs="data-tabs" id="example-tabs" class="tabs">
<li class="tabs-title is-active" tab-community-amenities="tab-community-amenities"
role="presentation">
<div class="tabs-link" data="#client-panel-0" role="tab" aria-controls="client-panel-0"
aria-selected="false" id="client-panel-0-label">Messi
</div>
</li>
<li class="tabs-title" tab-apartment-amenities="tab-apartment-amenities" role="presentation">
<div class="tabs-link" data="#client-panel-1" role="tab" aria-controls="client-panel-1"
aria-selected="false" id="client-panel-1-label">Pele
</div>
</li>
<li class="tabs-title" tab-pet-policy="tab-pet-policy" role="presentation">
<div class="tabs-link" data="#client-panel-2" role="tab" aria-controls="client-panel-2"
aria-selected="false" id="client-panel-2-label">Kaka
</div>
</li>
<li class="tabs-title" tab-parking-details="tab-parking-details" role="presentation">
<div class="tabs-link" data="#client-panel-3" role="tab" aria-controls="client-panel-3"
aria-selected="false" id="client-panel-3-label">Benzema ;)
</div>
</li>
<li class="tabs-title" tab-parking-details="tab-parking-details" role="presentation">
<div class="tabs-link" data="#client-panel-4" role="tab" aria-controls="client-panel-4"
aria-selected="false" id="client-panel-4-label">Berbatov
</div>
</li>
</ul>
make the link contain some sort of url variable 使链接包含某种url变量
<a href="players.html?selected=pele-id></a>
use jquery its nice 使用jQuery的很好
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
add an id tag to make it easier to find with jquery 添加一个id标记,使其更易于使用jquery查找
<div id="pele-id" class="tabs-link" data="#client-panel-2" role="tab" aria-controls="client-panel-2"
aria-selected="false" id="client-panel-2-label">
get that value in a script tag. 在脚本标签中获取该值。 then edit attr aria-selected to be (I assume this is what you are attempting to change).
然后将attr aria-selected编辑为(我假设这是您要更改的内容)。
<script>
var url = new URL(window.location.href);
var selector = url.searchParams.get("selected");
$("#" + selector).attr("aria-selected", "true")
</script>
Assuming changing that attr to "true" will do what you want this should work for all the different 假设将attr更改为“ true”将满足您的要求,这应该适用于所有不同的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.