<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style type="text/css">
            padding: 0%;
            margin: 0%;

             background: #ECF0F1;
             color: #666;
             margin: 50px;
             font-family: "Helvetica Neue";

            width: 400px;
            background: white;
            box-shadow: 1px 1px 2px rgba(0,0,0,.15);

            background: #1ABC9C;
            margin: 0%;
            padding: 0%;

        #tab-nav li{
            height: 50px;
            list-style: none;
            display: inline-block;
            line-height: 50px;
            text-align: center;

        #tab-nav li a{
            text-decoration: none;
            color: white;

            padding: 25px;

        #tab-nav li{
    <section id="tab-container">
        <ul id="tab-nav">
          <li><a href="#weather" id="nav-weather">Weather</a></li>
          <li><a href="#sport" id="nav-sport">Sport</a></li>
          <li><a href="#travel" id="nav-travel">Travel</a></li>
        <div id="tab-content">
          <article id="weather">
            <p>Weather is the state of the atmosphere, to the degree that it is hot or cold, wet or dry, calm or stormy, clear or cloudy. Weather, seen from an anthropological perspective, is something all humans in the world constantly experience through their senses, at least while being outside. There are socially and scientifically constructed understandings of what weather is, what makes it change, the effect it has on humans in different situations, etc. Therefore, weather is something people often communicate about.</p>
          <article id="sport">
            <p>Sports are usually governed by a set of rules or customs, which serve to ensure fair competition, and allow consistent adjudication of the winner. Winning can be determined by physical events such as scoring goals or crossing a line first. It can also be determined by judges who are scoring elements of the sporting performance, including objective or subjective measures such as technical performance or artistic impression.</p>
          <article id="travel">
            <p>Travel is the movement of people between relatively distant geographical locations, and can involve travel by foot, bicycle, automobile, train, boat, airplane, or other means, with or without luggage, and can be one way or round trip. Travel can also include relatively short stays between successive movements.</p>

        <script type="text/javascript">
            var nav_weather = document.getElementById("nav-weather");
            var nav_sport = document.getElementById("nav-sport");
            var nav_travel = document.getElementById("nav-travel");
            var weather = document.getElementById("weather");
            var sport = document.getElementById("sport");
            var travel = document.getElementById("travel");

   = 'none';
   = 'none';

            nav_weather.className = "active";


            nav_weather.onclick = function(e){
                nav_weather.className = "active";
       = "block";

            nav_sport.onclick = function(e){
                nav_sport.className = "active";
       = "block";

            nav_travel.onclick = function(e){
                this.className = "active";
       = 'block';

            function hideAll(){
       = "none";
       = "none";
       = "none";

                nav_weather.className = "";
                nav_sport.className = "";
                nav_travel.className = "";