Jump to content

W3.CSS MENU


james99
 Share

Recommended Posts


<!DOCTYPE html>

<html>

<title>W3.CSS</title>

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

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

<body>

 

<div class="w3-container">

<h2>Tabs</h2>

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

</div>

 

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

</ul>

 

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

<h2>London</h2>

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

</div>

 

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

<h2>Paris</h2>

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

</div>

 

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

<h2>Tokyo</h2>

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

</div>

 

<script>

openCity("London")

 

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";

}

 

}

</script>

 

</body>

</html>

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
 Share

×
×
  • Create New...