Гиперссылка не работает в HTML-коде, связанном с JS-кодом [closed]

От: Из: Общие

Я создаю интерактивную карту офисов, чтобы клиентам было проще добраться до ближайшего офиса. Я использую HTML-файл, CSS-файл и JS-файл вместе для этой карты. Все работает нормально, за исключением случаев, когда вы указываете местоположение на карте, информация о ближайшем офисе должна появиться в правой части экрана. Эта информация включает гиперссылку на веб-сайт офиса. Проблема в том, что гиперссылка выглядит нормально (синяя и подчеркнутая), но по ней нельзя щелкнуть. То есть ссылка не работает.

Я перепробовал все возможные решения, чтобы решить эту проблему. Вы не могли бы мне помочь? Заранее спасибо.

Это HTML-файл


    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Interactive Geographical Map w/ SVG &amp; JavaScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./vasbdc.css">

</head>
<body>

  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     inkscape:export-ydpi="96"
     inkscape:export-xdpi="96"
     inkscape:export-filename="/Users/maqabljh/OneDrive/test.png"
     inkscape:version="1.0rc1 (09960d6, 2020-04-09)"
     sodipodi:docname="test.svg"
     id="vasbdc-map"
     viewBox="-44643 -21466 74862 32467"
     version="1.1"
     width="1260"
     height="585">



     <g id="City1" transform="translate(1615 46.592)">
       <title>New University Office - Central Region</title>
       <desc>
         <image xlink:href="1234.jpg" alt="LOGO"></image>
         <p>
           <br>Tel: 111.222.3333
           <br><a href="http://www.google.com/">www.123.com</a>
        </p>
      </desc>

  <path d="m26870-5569l816-130 1345-188 26 13 21 10-1 35-62 40-61-6-41 15-109 140 4 36 26 55-82-11-67-5-51-1-41-25-16 85 15 71-6 55-27 151 25 56 31 5h46l15 41-11 80-52 45-25-10-51-6-36 5-26 5-21 25-10 25-1 40 15 36 15 45 10 51 20 50-5 45-6 45-26 35-21 20v56l-52 65-31 20-36 55h-26l-36 4-57 35-20-25 11-35 26-25 36-65 1-51 15-25 26-65 31-15 31-30 42-30 5-30-15-20-62-26-20 10-88 35v10l-52 90-73 191-47 75-47 85 15 66 66 10 62-14 62 5 40 21-25 19-21 20-42 61-10 45-42 50-31 20-26 30-10 30-6 30-10 20-15-5v-25l10-35 11-10 5-36-5-20-30-20h-31l-26-1-41 35-16 35-5 21 15 10 26 25-1 25v66l5 30-11 25-21 10h-15l-51 20-26 40-32 45-36 15-10 30-6 30 10 65-10 25-16 46-6 60 5 45 10 25 5 21 15 30v40l-26 40-11 20v56l-21 40-67 19-26-10 1-15-5-20 5-25v-25l-5-36-15-30-20-15-31 15-21 50-21 40-16 40-21 80-5 46-26 35-11 40-16 35-21 75-10 20-26 40-37 40-92 55-32 90-21 86-73 120-31 55 10 36 51 25 71 31 56 15 41 46 25 61-31 45-21 25-21 30-41 25-46 4-26-5-30-20-21-6h-30l-16 25-6 35-20 46-21 20-46-1-46-15-62 40-27 75-31 95-47 90-52 76-47 44-15 36 20 30 25 30 10 26-20 20-16 20-26 25-10 30-11 30-36-6-31-10-35 5-21 15-11 20-20 30-26 45-26 30-11 30-5 50 10 31 25 35 25 10 52 1 56 10 20 21 47 5 30-20 26 5 46 6 67-5 82-9v55l-1 40-26 50-36 15-25-5-5-20-10-30-16-31-41-10-30 5-47 14-46 15-21 40 10 31 25 50 21 35 20 51 4 40h-36l-41-5-40-6-31 5-16-10-25-30-36-36-30-45-51-41-25-30-10-16-47 5-41 20-56 30-21 20-37 95-10 20-21 45-37 70-10 20-21 35-52 81-32 80 5 70 46 16 67-30 61 11 5 25-21 45 36 15 46 1 31 20 15 30 36 26 41-10 92-45v71l-31 20-47 35-62 39-35-10-36-30-41 4-21 35-31 71-36 25-26-41-4-75 5-51-35-20-46-11-62-10-87-6-88 80-31 45-57 25-41 25-31 70-37 20-35-5-21 56-20-52v-35l21-30 20-20 21-15 78-70-4-151 46-15-25-20-31-10-57 15-15-16v-20l1-20-15-45 5-10h41l10-5 5-5-5-30 11-5 26-15 20-20 5-15 6-30 15-20 6-5 5-15-408-255-21-10h-5l-84 9-23-35-67-11-51-5-41-16-26 5-15 35-26 10-57-10-71-26-77-16-66-15-87-21-62-31-15 15v30l-42 5-46-5-26 35-20 10-15-46 21-65 26-45 42-85 15-35 46 45 36-40 26-5 87 87 51 20 41-30 51 11 42-35-16-31-46-20-46-15-61-21-25-76 16-55-31-5-36 15-57 55-30-6-10-35-15-56-20-35 36-20 56-45 63-70 16-60v-75l31-5 10 25 20 51-10 40 35 45 20 71h36l72 6 61 40 46 46 51 5 10-35-20-50-25-20-51-11v-55h57l46 1 25-10-25-26-20-35 20-20 62-35 77-14 57-5 5-40 31-15 62-20v-40l-51 5-57 14-128 55-93 29-72 35-26 40-31 40-10-25-20-46-5-45 26-35 31-15-36-35-61-16-41-56 6-35 21-20 5-30v-55l62 5 61 21 41 25 16-25-10-45-20-25-26-26 6-30 41-30 25 5 139 2 72-25 46 5 67 31 19 65 5 51 62 10 46 21 25-35-35-86 26-35 41 15 51 26 46 5 6-60 37-60 16-65-31 4-31 25-16 40-36 25-57-5-76-26-52 5-5-25 11-46-36-5-31 20h-30l-41-21-62 5-25-46 26-45 5-40-9-70 16-46 66-14 46 20 41 16 52-5 5-35-41-26-46-20-36-10-30-41v-35l31-25h52l36 1 15 30h41l10-25 6-30 36-45 15 30-6 45-15 46 15 25 36 5 31-50 36-15 21-45 16-50 25 10 46 81 66 21 62 15 9 46v45h36l26-50h46l37-35-16-30-71-26-46-20-46-26-77-50-66-61-35-31-77-10-47 19h-56l-46-5-26 45-21 60h-31l-4-81 15-35 31-35 68-70 36-85h46v40l20 61 52-20 5-50 16-45 31-20 36-5 26-30 16-40 30-10 16 25-1 46 20 45 16 10 30-10 26 16 30 40 36 31 41 15 31-25-10-25-25-36-46-35-26-25-40-56-10-35 26-20 46-45-10-36h-31l-45-30-122-122-57-6-41 10-72 10-20-21-5 11-6 45-21 40-26 5-30-36-5-45 6-40 15-30 42-30 51-45 37-25 36-60 26-10 41 20 25-15 6-30 15-20 21 5 15 16 36 20 26-15 20 15 20 6 31 5 5 20-16 25h-30l-47 10-31 30v15l31 30 15 35 30 21 16-10 21-50 36-35 26-10 26-5 5 20 4 40 5 36 15 25 15 35 5 31-10 40-11 40 20 25 26 5 15-20 21-20v-30l-4-55-5-40 41-10 41-5 26 5 5 25 5 36 15 25h36l15-15 6-35-5-45-15-36-20-60 10-40 26-5 20 35 46 51 35 51 31 25 41-25 6-50-30-46-16-30 21-5 41-5 11-45-10-50-20-31h-41l-42 20-61 25-36-6-5-40 11-40v-30l-15-31-10-40 26-5 15 25 15 31 25 20 46 21 21-46-45-80 11-56 20-10 41 16 36-10 5-25-20-15-46-1-56-25 15-25 21-10 5-25 16-46 41-9 5-30 21-46 21 16 5 25-1 50 10 15 31 26 15 40 4 71v50l15 10 31-30 6-60 21-25h25l31 15 46 11 62 15 31-30-21-25-61-46-41-35-20-61 47-40 21-10 56-29 57-20v-35l-25-16h-67l-72 24-57 25-62 25-25-25-10-36 32-105 31-30 6-76 36 11 20 20 46 15 56-4 21-20-41-21-51-35-46-31-5-20 16-25-31-15-71-11-32 55-46 5-61-11-10-35 46-15 36-19 31-46 51 11 62-20 32-60-11-10h-20l-67-1-51-20-77 29-83 65-35-60-41-51-61-1 4 51 26 45-16 5-26 35-82 25-113 14-61-15-47 4-20-45 16-40 98-20 51 1 31-35-56-41 57-50 25-10 63-55 78-150 56-5 5 30 25 41 67 15 82-39 52-80 42-35 82 31 46 20 71 11 82 5 67-50 37-90-4-55-20-61-31-50-40-91 21-20 15-20 26-16 25 1 21 9 15 5 16-10 4-11-14-28-15-20v-25l14-22 14-16 25-25 31-53z"/>
    </g>
</svg>

<div id="centerInfo"></div>
<script  src="./vasbdc.js"></script>

</body>
</html>

Это файл JS

    var vasbdcmap = document.getElementById("vasbdc-map"),
        centerInfo = document.getElementById("centerInfo"),
        allCenters = vasbdcmap.querySelectorAll("g");
        vasbdcmap.addEventListener("click", function(e){
            var center = e.target.parentNode;
            if(e.target.nodeName == "path") {
            for (var i=0; i < allCenters.length; i++) {
                allCenters[i].classList.remove("active");
            }
            center.classList.add("active");
            var centerName = center.querySelector("title").innerHTML,
            centerPara = center.querySelector("desc p");
            sourceImg = center.querySelector("img"),
            imgPath = "http://gator2007.temp.domains/~virgibdc/";
        //  imgPath = "";

            centerInfo.innerHTML = "";
            centerInfo.insertAdjacentHTML("afterbegin", "<img src="+imgPath%20+%20sourceImg.getAttribute('xlink:href')+" alt=""+sourceImg.getAttribute("alt')+"'><h1>"+centerName+"</h1><p>"+centerPara.innerHTML+"</p>");
            centerInfo.classList.add("show");

    
            }
        })

А это файл CSS

    * {
  box-sizing: border-box;
}

body {
  background: #88a;
  color: #fff;
  font-family: Avenir, Calibri, sans-serif;
}

#vasbdc-map {
  fill: #174f17;
}

#vasbdc-map g {
  -webkit-transition: .3s;
  transition: .3s;
}

#vasbdc-map g:hover {
  fill: #2e9e2e;
  cursor: pointer;
}

.active, .active:hover {
  fill: #2e2e9e !important;
}

#centerInfo {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}

@media all and (max-width: 800px) {
  #centerInfo {
    width: 40%;
  }
}
@media all and (max-width: 750px) {
  #centerInfo {
    width: 100%;
    position: static;
    background: none;
  }

  #centerInfo.show p {
    color: #000 !important;
    margin-bottom: 2rem;
  }
}
#centerInfo.show {
  opacity: 1;
}

#centerInfo h1 {
  background: #2e2e9e;
  padding: .3rem;
  padding-left: 1rem;
  margin-top: -.5rem;
  font-weight: 400;
}

#centerInfo p {
  margin-left: 2rem;
  margin-right: 2rem;
}

#centerInfo img {
  width: 100%;
}

```

0

Похожие записи:

  1. Создание ярлыка и отправка его в заранее заданное место назначения с жестким кодом

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *