从CodePen复制的JS代码在Dreamweaver报语法错误，动画标签页无法切换

问题原因及解决方案 #

1. Dreamweaver提示JavaScript语法错误的原因 #

你的JS代码中使用了ES6标准的模板字符串语法（即用反引号`包裹、包含${}变量占位符的写法），老旧版本的Adobe Dreamweaver内置的语法校验规则不支持ES6语法，所以会误报语法错误，该报错不影响代码在现代浏览器中的实际运行。
如果要消除Dreamweaver的错误提示，把模板字符串替换为普通字符串拼接即可：
把原有代码行

tabIndicator.style.left = `calc(calc(100% / 4) * ${i})`;

替换为

tabIndicator.style.left = "calc(calc(100% / 4) * " + i + ")";

2. 标签页无法切换的原因 #

你将JS文件的引入标签放在了<head>节点内，浏览器加载页面时会优先执行JS代码，此时页面的tab相关DOM元素还未渲染完成，JS无法获取对应元素就会执行失败，功能自然失效。
最简单的解决方案是把<script src="myScript.js"></script>这行代码移动到</body>结束标签的前面，修正后的HTML结构如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tabs">
    <div class="tab-header">
        <div class="active">
                    <i class="fa fa-code"></i>Code
            </div>
              <div>
                <i class="fa fa-pencil-square-o"></i>About
        </div>
              <div>
                <i class="fa fa-bar-chart"></i>Services
        </div>
              <div>
                <i class="fa fa-envelop-o"></i>Contact
        </div>
              </div>
      <div class="tab-indicator"></div>
    <div class="tab-body">
        <div class="active">
            <h2>This is code section</h2>
            <p>Test is all about fun</p>
        </div>
        <div>
            <h2>This is about section</h2>
            <p>Test is all about fun</p>
        </div>
              <div>
            <h2>This is services section</h2>
            <p>Test is all about fun</p>
        </div>
              <div>
            <h2>This is section</h2>
            <p>Test is all about fun</p>
        </div>
        </div>
  </div>
<script src="myScript.js"></script>
</body>
</html>

如果不想移动script标签的位置，也可以给所有JS代码包裹DOM加载完成的监听事件：

document.addEventListener('DOMContentLoaded', function() {
  let tabHeader = document.getElementsByClassName("tab-header")[0];
  let tabIndicator = document.getElementsByClassName("tab-indicator")[0];
  let tabBody = document.getElementsByClassName("tab-body")[0];
  let tabsPane = tabHeader.getElementsByTagName("div");
  for(let i=0;i<tabsPane.length;i++){
    tabsPane[i].addEventListener("click",function(){
      tabHeader.getElementsByClassName("active")[0].classList.remove("active");
      tabsPane[i].classList.add("active");
      tabBody.getElementsByClassName("active")[0].classList.remove("active");
      tabBody.getElementsByTagName("div")[i].classList.add("active");
      tabIndicator.style.left = "calc(calc(100% / 4) * " + i + ")";
    });
  }
})

内容的提问来源于stack exchange，提问作者Harsha Madusanka