Jump to content



Recommended Posts

<!DOCTYPE html>



<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">



<div class="w3-container">


<p>Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects. Click on the links below.</p>



<ul class="w3-navbar w3-black">

<li><a href="#" onmouseover="openCity('London')" onmouseleave="openCity('hideme')">London</a></li>

<li><a href="#" onmouseover="openCity('Paris')" onmouseleave="openCity('hideme')">Paris</a></li>

<li><a href="#" onmouseover="openCity('Tokyo')" onmouseleave="openCity('hideme')">Tokyo</a></li>



<div id="London" class="w3-container city">


<p>London is the capital city of England.</p>



<div id="Paris" class="w3-container city">


<p>Paris is the capital of France.</p>



<div id="Tokyo" class="w3-container city">


<p>Tokyo is the capital of Japan.</p>






function openCity(cityName) {

var i;

var x = document.getElementsByClassName("city");

for (i = 0; i < x.length; i++) {

x.style.display = "none";


if(cityName !=="hideme")


document.getElementById(cityName).style.display = "block";








Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...