Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Sep 2018
    Thanked 0 Times in 0 Posts

    Please let me understand, What this JavaScript code actually does?

    I don't understand, how this script actually doing to create a top menu. Please explain me sir.

    		function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    <p id="demo"></p>
    <!-- Tab links -->
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    <!-- Tab content -->
    <div id="London" class="tabcontent">
      <p>London is the capital city of England.</p>
    <div id="Paris" class="tabcontent">
      <p>Paris is the capital of France.</p> 
    <div id="Tokyo" class="tabcontent">
      <p>Tokyo is the capital of Japan.</p>

  2. #2
    Master Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Behind the Wall
    Thanked 598 Times in 591 Posts
    PHP Code:
    // evt - the Event object, cityName - a city name
    function openCity(evtcityName) {
    // definition of local variables
    var itabcontenttablinks;
    // get the content divs
    tabcontent document.getElementsByClassName("tabcontent");
    // loop through all content divs and hide them
    for (0tabcontent.lengthi++) {
    tabcontent[i].style.display "none";
    // get the buttons to show the matching div
    tablinks document.getElementsByClassName("tablinks");
    // remove the 'active' class from all of them
    for (0tablinks.lengthi++) {
    tablinks[i].className tablinks[i].className.replace(" active""");
    // show div having the matching ID
    document.getElementById(cityName).style.display "block";
    // add the 'active' class to the cliced button
    evt.currentTarget.className += " active";

    But nowadays you can achieve the same with a couple of CSS lines.
    Last edited by Dormilich; Oct 8th, 2018 at 04:18 PM.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts