Question

我正在使用W3.CSS导航标签

＆＃13;

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

＆＃13;

body {font-family: "Lato", sans-serif;}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

＆＃13;

<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

＆＃13;

我现在陷入困境，因为我希望能够根据网址预先选择的标签打开页面

因此，例如www.example.com/mypage#tokyo将打开已选择“东京”选项卡的页面。

有人有例子吗？

Answer 1

使用window.location.href，您可以获取页面的url，然后使用.split（/ [＃] + /）。pop（）来获取它的最后一部分，然后使用它可以使用结果作为选择器显示正确的选项卡。

Answer 2

将其添加到JavaScript的末尾：

myurl = window.location.href;
londonURL = "www.example.com/mypage#london";
parisURL = "www.example.com/mypage#paris";
tokyoURL = "www.example.com/mypage#tokyo";

function preOpen () {
  if (myurl == londonURL) {
    openCity(event, 'London');
    } else if (myurl == parisURL ) {
      openCity(event, 'Paris');
    } else if (myurl == tokyoURL) {
      openCity(event, 'Tokyo');
    }
};
preOpen();

Answer 3

因此，我们假设这是您的主页。

＆＃13;

<a href="pathToFile/test.html#London">London</a>
<a href="pathToFile/test.html#Paris">Paris</a>
<a href="pathToFile/test.html#Tokyo">Tokyo</a>

＆＃13;

点击其中一个锚标签后，它会带您进入带有标签链接的下一页。在这个页面（带有tablinks的那个）中添加这个JS

＆＃13;

function eventFire(el, etype){

  if (el.fireEvent) {
    el.fireEvent('on' + etype);
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}
selectedTab = window.location.href;
console.log(selectedTab);
idUrl = selectedTab.substr(selectedTab.indexOf("#")+1);
console.log(idUrl);
if(idUrl == "Tokyo"){
	eventFire(document.getElementsByClassName("tablinks")[2], 'click'); 
}
if(idUrl == "Paris"){
	eventFire(document.getElementsByClassName("tablinks")[1], 'click'); 
}
if(idUrl == "London"){
	eventFire(document.getElementsByClassName("tablinks")[0], 'click'); 
}

＆＃13;

这将模拟基于id的上一页所需tablink的点击。

这一行：selectedTab = window.location.href;获取网址。这一行：idUrl = selectedTab.substr(selectedTab.indexOf("#")+1);在网址上找到＃的索引并添加一个，这样您就可以获得您正在寻找的ID。

这里：if(idUrl == "Tokyo"){ eventFire(document.getElementsByClassName("tablinks")[2], 'click'); }这里我们设置一个条件，如果这是所需的ID，那么我们传递作为第一个参数，该tablink的类名在这种情况下是类名tablinks数组的第2位。事件函数取自here

以屏幕截图为例。希望这会有所帮助。

主页：

伦敦点击了基于传递的网址。

编辑2 使用此处请参阅注释以获取解释

＆＃13;

selectedTab = window.location.href;
idUrl = selectedTab.substr(selectedTab.indexOf("#")+1);
// Get the Classes
arr = document.getElementsByClassName("tablinks");
// Loop through the array and a condition to find if the id on the url is similar to the one in the
// array, if so then call the function and pass that parameter.
for(var i = 0; i<arr.length; i++){
	if(idUrl == arr[i].innerText){
		eventFire(arr[i],'click');
	}
}

＆＃13;

删除它：

＆＃13;

selectedTab = window.location.href;
console.log(selectedTab);
idUrl = selectedTab.substr(selectedTab.indexOf("#")+1);
console.log(idUrl);
if(idUrl == "Tokyo"){
	eventFire(document.getElementsByClassName("tablinks")[2], 'click'); 
}
if(idUrl == "Paris"){
	eventFire(document.getElementsByClassName("tablinks")[1], 'click'); 
}
if(idUrl == "London"){
	eventFire(document.getElementsByClassName("tablinks")[0], 'click'); 
}

＆＃13;

W3.CSS导航选项卡 - 根据URL参数选择

3 个答案: