时间戳

首页 > 解决方案 > 如何在javascript中获取a href id值并取决于id值打开相关页面

javascript - 如何在javascript中获取a href id值并取决于id值打开相关页面

问题描述

我有一个页面调用 main.html，它包含多个 url，这些 url 将转到一个名为 central.htm 的页面。central.htm 有一个按钮，它将根据 url 打开目标页面。

我读了这篇使用 id 值的帖子，但我不明白如何找到a hrefid

我在 main.html 中应用 id<a href>并在 central.htm 中使用 javascript。但是我不确定是否可以这样做，因为我尝试了以下代码，但它不起作用。

（更新代码）

  <!DOCTYPE HTML>  
<html>  
<head>  
    <title>  
        this is main.html 
    </title> 
</head>  

<body>
<style>
//making button look like a tag
button {
background: none!important;
border: none;
padding: 0!important;
color: #069;
text-decoration: underline;
 cursor: pointer;
}
</style>

<button href="https://www.mywebsite/central.htm" id="1" onclick="save(this)">First link will go to the central page first and then go to Destination A</button>
<button href="https://www.mywebsite/central.htm" id="2" onclick="save(this)">Second link will go to the central page first and then go to Destination B</button>
<button href="https://www.mywebsite/central.htm" id="3" onclick="save(this)">Thrid link will go to the central page first and then go to Destination C</button>
<button href="https://www.mywebsite/central.htm" id="4" onclick="save(this)">Fourth link will go to the central page first and then go to Destination D</button>
                                                    //^added onclick
<script>
function save(el){
  //getting id of href click
 var ids=el.getAttribute("id");
 console.log(ids);
 localStorage.clear();//clear previous data
 localStorage.setItem("ids", ids);//add data to storage
 var href=el.getAttribute("href");//get href
 console.log(href)
 window.open(href, '_blank');//open in blank page
}

</script>
</body>
</html>

然后所有链接都到中心页面，中心页面确定链接然后打开相关目的地

（更新代码）

<!DOCTYPE HTML>  
<html>  
<head>  
    <title>  
        this is central.htm 
    </title> 
</head>  
<script type="text/javascript">
 function openDestination() {
 if (localStorage.getItem("ids") != null) {
//get that value
 var ids= localStorage.getItem("ids");
 console.log(ids);
}
switch(ids) {
case 1:
  window.open("https://www.mywebsite/DestinationA.html");
  break;
case 2:
  window.open("https://www.mywebsite/DestinationB.html");
  break;
case 3:
 window.open("https://www.mywebsite/DestinationC.html");
  break;
case 4:
  window.open("https://www.mywebsite/DestinationD.html");
  break;
 //if none of those, close the window
default:
  window.close();
}
}
</script>

<body>
<p>Click the button and it will open the destination page</p>
<p><input id="clickMe"  onclick="openDestination()" type="button" value="click to open destination" /></p>
</body>
</html>

运行代码后，如果我单击第一个链接按钮，它将转到目标 A。但是，如果我单击其他链接按钮（例如第三个链接），它仍然会转到目标 A。

由于我的网站的限制，我暂时无法使用 jQuery，所以我专注于使用 javascript。

请问central.htm如何从main.html中获取值，然后根据该值打开相关的目标页面。

参考

https://www.geeksforgeeks.org/how-to-get-the-id-of-the-clicked-button-using-javascript-jquery

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

标签： javascripthtml

解决方案

您可以在此处使用localStorage .ie：保存 in 的 ida href并使用andlocalStorage在其他页面中获取它。getItemsetItem

您main.html将如下所示

<style>
//making button look like a tag
  button {
  background: none!important;
  border: none;
  padding: 0!important;
  color: #069;
  text-decoration: underline;
  cursor: pointer;
   }
</style>

  <button href="https://www.mywebsite/central.htm" id="1" onclick="save(this)">First link will go to the central page first and then go to Destination A</button>
  <button href="https://www.mywebsite/central.htm" id="2" onclick="save(this)">Second link will go to the central page first and then go to Destination B</button>
  <button href="https://www.mywebsite/central.htm" id="3" onclick="save(this)">Thrid link will go to the central page first and then go to Destination C</button>
  <button href="https://www.mywebsite/central.htm" id="4" onclick="save(this)">Fourth link will go to the central page first and then go to Destination D</button>
                                                        //^added onclick
  <script>
   function save(el){
      //getting id of href click
     var ids=el.getAttribute("id");
     console.log(ids);
     localStorage.clear();//clear previous data
     localStorage.setItem("ids", ids);//add data to storage
     var href=el.getAttribute("href");//get href
     console.log(href)
     window.open(href, '_blank');//open in blank page
    }

  </script>

然后在你的central page下面做：

 function openDestination() {
if (localStorage.getItem("ids") != null) {
  //get that value
    var ids= localStorage.getItem("ids");
    console.log(ids);
  }
switch(ids) {
   case 1:
      window.open("https://www.mywebsite/DestinationA.html");
      break;
   case 2:
      window.open("https://www.mywebsite/DestinationB.html");
      break;
   case 3:
     window.open("https://www.mywebsite/DestinationC.html");
      break;
   case 4:
      window.open("https://www.mywebsite/DestinationD.html");
      break;
 //if none of those, close the window
   default:
      window.close();
  }
}

推荐阅读