javascript - 来自其他站点时如何自动打开选项卡?
问题描述
目前我有一个带有元素表的站点。这些元素有一些子元素。我有第二个站点,我可以在其中看到元素和子元素的许多选项卡。我现在以这种方式调用该网站:
<a class="dropdown-item" role="presentation" asp-controller="Scenario" asp-action="SimulationEvaluation">Auswerten</a>
所以元素是模拟,子元素是模拟的结果。第二页中的选项卡和功能如下所示:
<div class="tab" style=" border: none; overflow:hidden">
<button class="tablinks" onclick="openTab(event, 'Ergebnis-1')" id="defaultOpen">Ergebnis-1</button>
<button class="tablinks" onclick="openTab(event, 'Ergebnis-2')">Ergebnis-2</button>
<button class="tablinks" onclick="openTab(event, 'Ergebnis-3')">Ergebnis-3</button>
</div>
<div id="Ergebnis-1" class="tabcontent">
......
</div>
<div id="Ergebnis-2" class="tabcontent">
......
</div>
<div id="Ergebnis-3" class="tabcontent">
......
</div>
<script>
document.getElementById("defaultOpen").click();
function openTab(evt, name) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(name).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
我现在的问题是:当我单击第一页表格中的子元素时,我希望自动打开匹配的选项卡。因此,当我单击 Simulation-1,Result-3 示例时,我希望预先打开 Result-3-Tab。那可能吗?^^
解决方案
In the first site you have to set up links like this
<a href="secondsite.com?tab=Simulation-1">Simulation-1</a>
<a href="secondsite.com?tab=Result-3">Result-3</a>
And in the second website you have to add this javascript code inside document.ready:
const urlParams = new URLSearchParams(window.location.search);
const tabName = urlParams.get('tab');
if (tabName){
document.querySelector('[onclick*=' + tabName + ']').click();
}
推荐阅读
- node.js - Azure CosmosDB with MongoDB API:如何避免请求率大的错误
- swift - 将 Swift 3 函数转换为 Swift 4
- python - 将两个 pyspark 数据帧相乘
- javascript - 如何从 React 组件调用外部函数
- vba - Excel VBA - 将特定工作簿中的所有工作表复制到活动工作簿中
- javascript - Firebase 登录 Facebook / Google - UID
- sql - 根据计数均匀分布顺序 SQL 结果
- php - mysql加入多个where
- vba - 循环计数颜色
- javascript - 另一个站点上的 PHP 音频