Javascript：当我将其他Href链接添加到网页的其他部分时，为什么我的选项卡内容消失了？

Question

好的开始，我已经让我的标签处于正常工作状态（正如这个小提琴所示：tab fiddle

但是当我尝试在网页上的其他任何地方添加链接时，我的标签会中断并且不会显示标签内容，标签本身也会变得无法点击。那是为什么？

我为这个问题难以解决。

哦，只是一个注释，我在简单的Javascript中完成了我的标签脚本，因为绝对必须我可以在简单的Javascript 中完成。我不允许使用JQuery或除了简单的Javascript之外的任何其他方法来执行选项卡。

这是我的标签脚本代码：

//Tab initialization
var listenReady = setInterval(function() {
  if (document.readyState == "complete") {
    clearInterval(listenReady);
    makeTabs(".tabs");
  };
}, 10);

function makeTabs(selector) {

  tab_lists_anchors = document.querySelectorAll(selector + " li a");
  divs = document.querySelector(selector).querySelectorAll("div");

  for (var i = 0; i < tab_lists_anchors.length; i++) {
    console.log(tab_lists_anchors[i].classList)
    if (tab_lists_anchors[i].classList.contains('active')) {
      divs[i].style.display = "block";
    }
  }

  for (i = 0; i < tab_lists_anchors.length; i++) {

    document.querySelectorAll(".tabs li a")[i].addEventListener('click', function(e) {

      for (i = 0; i < divs.length; i++) {
        divs[i].style.display = "none";
      }

      for (i = 0; i < tab_lists_anchors.length; i++) {
        console.log(tab_lists_anchors[i].classList)
        tab_lists_anchors[i].classList.remove("active");
      }

      clicked_tab = e.target || e.srcElement;
      clicked_tab.classList.add('active');
      div_to_show = clicked_tab.getAttribute('href');
      document.querySelector(div_to_show).style.display = "block";

    });
  }
}

.tabs {
  overflow: hidden;
  clear: both;
}
.tabs ul {
  list-style-type: none;
  margin: 0 0 0 0;
  bottom: -1px;
  position: relative;
}
.tabs li {
  float: left;
  margin: 0 0;
}
.tabs a {
  display: block;
  padding: 5px 10px;
  background-color: #EEE;
  color: #000;
  text-decoration: none;
  margin: 0;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  border-right: 1px solid #DDD;
  border-left: 1px solid #DDD;
  font: 13px/18px verdana, arial, sans-serif;
}
.tabs a.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
}
.tabs div {
  clear: both;
  border: 1px solid #CCC;
  padding: 10px;
  font-family: verdana;
  font-size: 13px;
  background-color: purple;
  display: none;
  min-height: 300px;
}

<div class="tabs">
  <ul>
    <!-- Tab Headings -->
    <li><a href="#tab1" class="active">Tab 1</a>
    </li>
    <li><a href="#tab2">Tab 2</a>
    </li>
    <li><a href="#tab3">Tab 3</a>
    </li>
    <li><a href="#tab4">Tab4</a>
    </li>
  </ul>

  <!-- Tab Contents -->
  <div id="tab1">
    <h1>Tab 1</h1>
    <p>Lorem Ipsum. Contents of tab 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent
      eget dui dui.</p>
  </div>

  <div id="tab2">
    <h1>Tab 2</h1>
    <p>Contents of tab 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis
      in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
  </div>

  <div id="tab3">
    <h1>Tab 3</h1>
    <p>Contents of tab . Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis
      in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
  </div>

  <div id="tab4">
    <h1>Tab 4</h1>
    <p>Contents of tab 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices ante vel elementum tristique. In suscipit nisi et purus cursus, eget tincidunt nunc mattis. Duis commodo mollis interdum. Vestibulum ante ipsum primis
      in faucibus orci luctus et ultrices posuere cubilia Curae; In efficitur massa et ex gravida imperdiet. Phasellus finibus arcu ut erat dignissim efficitur. Curabitur quam ipsum, volutpat et elit et, sollicitudin malesuada mi. Praesent eget dui dui.</p>
  </div>
</div>

 <div>
      <a href="https://www.google.com/">Google Link Example</a>
 </div>

EDITED：以Google主页的href链接为例。像这样的链接会破坏我的标签代码并导致它无法正常工作。