时间戳

首页 > 解决方案 > 点击后如何将标签中的文本设置为url？

javascript - 点击后如何将标签中的文本设置为url？

问题描述

我的 HTML 是

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles/styles.css" />
    <title>MrSrv7</title>
  </head>
  <body>
    <div id="slideContainer"></div>
    <script src="./script.js"></script>
  </body>
</html>

脚本是

var slides = ["slide 1", "slide 2", "slide 3", "slide 4", "slide 5"]
var str = '<ul>'

slides.map((slide, index)=> {

  str += "<li> <a href='?'>"+ slide + '</a> </li>'; // I need to set the href
attribute so that whatever link is clicked, the text in it must be appended 
URL bar.
  console.log(index)
}); 

str += '</ul>';
document.getElementById("slideContainer").innerHTML = str;

例如：如果用户单击 slide1 链接，则 URL 必须是http://127.0.0.1:5500/index.html#slide1

如果用户单击 slide5 链接，则 URL 必须是http://127.0.0.1:5500/index.html#slide5

标签： javascripthtml

解决方案

我希望以下内容对您有用。

var slides = [
  { link: 'https://www.google.com.tr/', title: 'Google' },
  { link: 'https://www.google.com.tr/', title: 'Google' },
  { link: 'https://www.google.com.tr/', title: 'Google' }
]

function getLinkItem(link, title) {
  var el =  document.createElement("li")
  el.innerHTML = "<a href='" + link + "'>" + title + "</a>";

  return el
}

for(var i = 0; i < slides.length; i++) {
  var dataItem = slides[i];
  var htmlItem = getLinkItem(dataItem.link, dataItem.title);

  document.getElementById('link-list').appendChild(htmlItem)
}

此处示例：https ://codepen.io/yasgo/pen/QWKWbeE

推荐阅读