stackoom
  简体   繁体   中英

JavaScript code copied from code pen giving error

 原文  2021-07-22 21:14:14  0   1    javascript/ html/ css

Question

I am new to HTML CSS and javascript. I did some coding on creating animated tabs with indicators using HTML, CSS & JavaScript. I am stuck with editing the JavaScript file and the error I am getting while editing this file and getting "syntax error in JavaScript" when using Dreamweaver IDE. I tried adding function keyword and closing / adding brackets but did not work so far. Seems CSS working fine and I am stuck with writing the javascript file properly. There might not any syntax errors since it is working fine in the https://codepen.io/ . When I am compiling it in the Adobe DreamViewer the software throws a Syntax error on the 1st line itself.

The reason behind me to think this is a javascript error is as I have shown in the example, unable to move between tabs of CODE, ABOUT, SERVICES, and CONTACT in the index.html page (Image attached).

Chrome 控制台结果

在此处输入图片说明

在此处输入图片说明

HTML 

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="myScript.js"></script>
</head>

<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>
</html>

JavaScript 

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})`;
  });
}

CSS 

body {
  background:#ddd;
  font-family:"Raleway";
}
.tabs {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:500px;
  height:250px;
  background:#f5f5f5;
  padding:20px 30px;
  overflow:hidden;
  border-radius:50px;
  box-shadow:5px 10px 5px #ccc;
}
.tabs .tab-header {
  height:60px;
  display:flex;
  align-items:center;
}
.tabs .tab-header > div {
  width:calc(100% / 4);
  text-align:center;
  color:#888;
  font-weight:600;
  cursor:pointer;
  font-size:14px;
  text-transform:uppercase;
  outline:none;
}
.tabs .tab-header > div > i {
  display:block;
  margin-bottom:5px;
}
.tabs .tab-header > div.active {
  color:#00acee;
}
.tabs .tab-indicator {
  position:relative;
  width:calc(100% / 4);
  height:5px;
  background:#00acee;
  left:0px;
  border-radius:5px;
  transition:all 500ms ease-in-out;
}
.tabs .tab-body {
  position:relative;
  height:calc(100% - 60px);
  padding:10px 5px;
}
.tabs .tab-body > div {
  position:absolute;
  top:-200%;
  opacity:0;
  transform:scale(0.9);
  transition:opacity 500ms ease-in-out 0ms,
    transform 500ms ease-in-out 0ms;
}
.tabs .tab-body > div.active {
  top:0px;
  opacity:1;
  transform:scale(1);
}

1 answers

solution1
 1  2021-07-23 07:14:26

Your code is working fine. You are missing the body tag

</head>
<body>    <!-- Add this --- >

<div class="tabs">
.
 .
.
 .

   <div>
            <h2>This is section</h2>
            <p>Test is all about fun</p>
        </div>
        </div>  
</div>
</body> <!-- Add this --- >
</html>


 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})`; }); }
 body { background:#ddd; font-family:"Raleway"; } .tabs { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:500px; height:250px; background:#f5f5f5; padding:20px 30px; overflow:hidden; border-radius:50px; box-shadow:5px 10px 5px #ccc; } .tabs .tab-header { height:60px; display:flex; align-items:center; } .tabs .tab-header > div { width:calc(100% / 4); text-align:center; color:#888; font-weight:600; cursor:pointer; font-size:14px; text-transform:uppercase; outline:none; } .tabs .tab-header > div > i { display:block; margin-bottom:5px; } .tabs .tab-header > div.active { color:#00acee; } .tabs .tab-indicator { position:relative; width:calc(100% / 4); height:5px; background:#00acee; left:0px; border-radius:5px; transition:all 500ms ease-in-out; } .tabs .tab-body { position:relative; height:calc(100% - 60px); padding:10px 5px; } .tabs .tab-body > div { position:absolute; top:-200%; opacity:0; transform:scale(0.9); transition:opacity 500ms ease-in-out 0ms, transform 500ms ease-in-out 0ms; } .tabs .tab-body > div.active { top:0px; opacity:1; transform:scale(1); }
 <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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Generate Code pen link programmatically - Javascript Example code from Javascript textbook giving unexpected error Running Javascript code on Unity giving error. Javascript code giving if condition error in console Why is this JavaScript code giving me error “undefined”? Javascript Code giving error on chrome and firefox Javascript half works locally, fully works on code pen Show Copied Tooltip When Successfully Copied Through Javascript Code How to get HTML code from editable CodePen Embed Pen How can I integrate the code from this pen onto my site?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM