Difference between revisions of "Team:NTHU Formosa"

Line 267: Line 267:
 
     }
 
     }
  
−
     .side-button.twitter::before {
+
     .side-button.Introduction::before {
−
       content: "Twitter";
+
       content: "Introduction";
 
     }
 
     }
  
−
     .side-button.twitter:after {
+
     .side-button.Introduction:after {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Twitter-07-128.png") no-repeat center;
+
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center;
 
     }
 
     }
  
−
     .side-button.instagram::before {
+
     .side-button.Design::before {
−
       content: "Instagram";
+
       content: "Design";
 
     }
 
     }
  
−
     .side-button.instagram:after {
+
     .side-button.Design:after {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Instagram-128.png") no-repeat center;
+
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center;
 
     }
 
     }
  
−
     .side-button.soundcloud::before {
+
     .side-button.Biosafety::before {
−
       content: "Soundcloud";
+
       content: "Biosafety";
 
     }
 
     }
  
−
     .side-button.soundcloud:after {
+
     .side-button.Biosafety:after {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_SoundCloud-128.png") no-repeat center;
+
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center;
 
     }
 
     }
  
−
     .side-button.linked-in::before {
+
     .side-button.Future_Application::before {
−
       content: "LinkedIn";
+
       content: "Future Applicationk";
 
     }
 
     }
  
−
     .side-button.linked-in:after {
+
     .side-button.Future_Application:after {
−
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_LinkedIn-128.png") no-repeat center;
+
       background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Facebook-128.png") no-repeat center;
−
    }
+
−
 
+
−
    .side-button.pinterest::before {
+
−
      content: "Pinterest";
+
−
    }
+
−
 
+
−
    .side-button.pinterest:after {
+
−
      background: url("https://cdn3.iconfinder.com/data/icons/social-media-2026/60/Socialmedia_icons_Pinterest-23-128.png") no-repeat center;
+
 
     }
 
     }
 
   </style>
 
   </style>
Line 336: Line 328:
 
     </div>
 
     </div>
 
     <div class="side-container middle">
 
     <div class="side-container middle">
−
       <div class="rela-block side-button " id="mySide_1"></div>
+
       <div class="rela-block side-button" id="mySide_1"></div>
−
       <div class="rela-block side-button " id="mySide_2"></div>
+
       <div class="rela-block side-button" id="mySide_2"></div>
−
       <div class="rela-block side-button instagram" id="mySide_3"></div>
+
       <div class="rela-block side-button" id="mySide_3"></div>
−
       <div class="rela-block side-button soundcloud" id="mySide_4"></div>
+
       <div class="rela-block side-button" id="mySide_4"></div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
Line 346: Line 338:
 
   <script>
 
   <script>
 
     function onAnchorChange() {
 
     function onAnchorChange() {
 +
      //Initialize all side element
 
       var side = [document.getElementById("mySide_1"), document.getElementById("mySide_2"), document.getElementById("mySide_3"), document.getElementById("mySide_4")];
 
       var side = [document.getElementById("mySide_1"), document.getElementById("mySide_2"), document.getElementById("mySide_3"), document.getElementById("mySide_4")];
−
       side[0].classList.remove(side[0].classList.item(2));
+
 
−
       side[0].classList.add("instagram");
+
       // Clear all class
−
      //element.classList.remove("mystyle");
+
      for (let i = 0; i < 4; i++) {
 +
        side[i].classList.remove(side[i].classList.item(2));
 +
       }
 +
 
 +
      // Get anchor url var currentUrl = document.URL,
 +
      var urlParts = document.URL.split('#');
 +
      if urlParts.length > 1 {
 +
        var anchor = urlParts[1];
 +
 
 +
        // Add the corresponding class
 +
        switch (anchor) {
 +
          case "0":
 +
          case "1":
 +
            side[0].classList.add("Introduction");
 +
            side[1].classList.add("Design");
 +
            side[2].classList.add("Biosafety");
 +
            side[3].classList.add("Future_Application");
 +
            break;
 +
          case "2":
 +
          case "3":
 +
          case "4":
 +
          case "5":
 +
        }
 +
 
 +
      }
 
     }
 
     }
  

Revision as of 05:00, 10 October 2018