使用锚标签链接打开标签？
Posted
技术标签:
【中文标题】使用锚标签链接打开标签？【英文标题】：Open tab using anchor tag link? 【发布时间】：2018-12-12 11:10:27 【问题描述】：所以我在一个页面上有两个标签，带有锚标签 - 我使用标题菜单项上的锚从主页导航到它们。
我已经使用活动类和 aria-expanded="true" 使实际的选项卡工作，但我无法从标题中获取适当的选项卡以处于活动状态。
即： 1.标题菜单->点击#tab2链接 2.加载页面->滚动到锚标签-> tab2打开（这是我有问题的部分，tab 1保持打开状态，除非我真的点击tab2按钮）
我尝试更改所涉及的活动类，但我对 javascript/jquery 还很陌生，所以我不确定我是否真的可以做到；此外，这是在 worpress 中，并且标题菜单没有其自身元素的 id 字段。
=================================
编辑，澄清：我有标签工作，我可以从标题链接转到页面上的它们，我只需要根据我从标题单击的链接打开正确的标签
我也尝试过启动 .click(#tab2)，但脚本无法正常运行。
if(window.location.href.indexOf("tab2") > -1)
document.getElementById('tab2').click();
编辑： 标题 html fot 链接：
<ul class="uk-nav uk-nav-navbar">
<li class="uk-active">
<a title="" href="testsite.com/#tab1" >tab 1</a></li>
<li class="uk-active"><a title="" href="testsite.com/#tab2"
class="">tab2</a>
</li>
</ul>
标签 HTML
<li class="uk-width-medium-1-4 active" id="tab1" aria-expanded="false">
<a class="uk-button tab1">tab1</a>
</li>
<li class="uk-width-medium-1-4 " id="tab2" aria-expanded="false">
<a class="uk-button tab2">tab2</a>
</li>
Javascript：
var ai = document.getElementById(""); [I'm having trouble with this, cause I can't see a way to attach an id to a wordpress menu item]
var ch = document.getElementById("");
ai.onclick = function()
document.getElementById('tab1').click();
ch.onclick = function()
document.getElementById('tab2').click();
【问题讨论】：
能否分享您的代码以帮助我们理解 你可以使用 html ancher 标签目标属性 your link name 【参考方案1】：您也可以使用 jQuery 进行尝试。在下面添加示例代码sn-p，请看一下。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
var anchorHash = window.location.href.toString();
if( anchorHash.lastIndexOf('#') != -1 )
anchorHash = anchorHash.substr(anchorHash.lastIndexOf('#'));
if( $('a[href="'+ anchorHash +'"]').length > 0 )
$('a[href="'+ anchorHash +'"]').trigger('click');
);
</script>
</body>
</html>
【讨论】：
我认为这段代码只适用于标签？我需要通过单击菜单项链接来打开选项卡 假设您已将上述页面命名为“sample.html”，那么您可以通过不同的 url 检查它是否正常工作，例如：“sample.html#menu1”或“sample.html#menu2”或“示例.html#menu3"。 如果我在 codepen 上尝试<button href="#home"> test</button>，没有任何反应；这不是要那样工作的吗？
按钮真的有“href”属性吗？页面加载时，上面的共享代码有效。我只是想说，如果可能的话，尝试使用上面的共享代码创建一个测试 html 页面。然后尝试使用不同类型的 url 模式导航到该页面，例如“#menu1”/“#menu2”。这里 menu1/menu2 是锚标签 HREF 属性值，在页面加载期间会检查该属性值，并触发匹配的锚标签点击事件。以上是关于使用锚标签链接打开标签？的主要内容，如果未能解决你的问题，请参考以下文章