Hello and welcome to our community! Is this your first visit?
Register
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
    Posts
    5
    Thanks
    1
    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.

    Code:
    <script>
    		
    		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";
    }
    
    	</script>
    </head>
    <body>
    <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>
      
    </div>
    
    <!-- Tab content -->
    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>
    
    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>
    
    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>
    
    
    
    	
    </body>
    </html>

  2. #2
    Master Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    5,772
    Thanks
    26
    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
  •