API tools faq
paste
Advertisement
Guest User

div_block

a guest
Jan 20th, 2016
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5.     <head>
  6.  
  7.         <meta charset="utf-8" />
  8.         <link rel="stylesheet" href="css/style.css" />
  9.  
  10.         <script type="text/javascript">
  11.  
  12.         var n1, n2, n3, n4;  // points to the navigation
  13.         var d1, d2, d3, d4; // point to the div tags
  14.         var highLight = "#ffde07";
  15.         var normal = "#4c4d4e";
  16.  
  17.         function init () {
  18.  
  19.             // calls the navigation
  20.             n1 = document.getElementById("nav1");
  21.             n2 = document.getElementById("nav2");
  22.             n3 = document.getElementById("nav3");
  23.             n4 = document.getElementById("nav4");
  24.  
  25.             // calls the ids in divs
  26.            
  27.             d1 = document.getElementById("Home");
  28.             d2 = document.getElementById("Budget");
  29.             d3 = document.getElementById("location");
  30.             d4 = document.getElementById("Contact");
  31.  
  32.             //colors the nav1 to yellow
  33.             n1.style.background = highLight;
  34.  
  35.         }
  36.  
  37.          function showTab(tab) {
  38.             // tab 1 = home 2 = budget 3 = location 4 = contact
  39.  
  40.             //alert(tab);
  41.  
  42.             if(tab ==1) {
  43.                 n1.style.background = highLight;
  44.                 n2.style.background = normal;
  45.                 n3.style.background = normal;
  46.                 n4.style.background = normal;
  47.                 d1.style.display = "block";
  48.                 d2.style.display = "none";
  49.                 d3.style.display = "none";
  50.                 d4.style.display = "none";
  51.  
  52.  
  53.             }
  54.         if(tab ==2) {
  55.                 n1.style.background = normal;
  56.                 n2.style.background = highLight;
  57.                 n3.style.background = normal;
  58.                 n4.style.background = normal;
  59.  
  60.                 d1.style.display = "none";
  61.                 d2.style.display = "block";
  62.                 d3.style.display = "none";
  63.                 d4.style.display = "none";
  64.  
  65.             }
  66.             if(tab ==3) {
  67.                 n1.style.background = normal;
  68.                 n2.style.background = normal;
  69.                 n3.style.background = highLight;
  70.                 n4.style.background = normal;
  71.                 d1.style.display = "none";
  72.                 d2.style.display = "none";
  73.                 d3.style.display = "block";
  74.                 d4.style.display = "none";
  75.  
  76.             }
  77.             if(tab ==4) {
  78.                 n1.style.background = normal;
  79.                 n2.style.background = normal;
  80.                 n3.style.background = normal;
  81.                 n4.style.background = highLight;
  82.                 d1.style.display = "none";
  83.                 d2.style.display = "none";
  84.                 d3.style.display = "none";
  85.                 d4.style.display = "block";
  86.         }
  87.  
  88.     }
  89.  
  90.         </script>
  91.  
  92.         <title> Business Application </title>
  93.  
  94.     </head>
  95.  
  96.     <body onLoad="init()">
  97.  
  98.     <main>
  99.  
  100.         <nav>
  101.  
  102.     <a href="#" id="nav1" onclick="showTab(1)">Home</a>
  103.     <a href="#" id="nav2" onclick="showTab(2)">Budget</a>
  104.     <a href="#" id="nav3" onclick="showTab(3)">Location</a>
  105.     <a href="#" id="nav4" onclick="showTab(4)">Contact</a>
  106.            
  107.     </nav>
  108.  
  109.         <div id="home">
  110.  
  111.         <h1>Development made simple - Home</h1>
  112.         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  113.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  114.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  115.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  116.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  117.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  118.         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  119.         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  120.         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  121.         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  122.         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  123.            
  124.         </div> <!-- closing of home -->
  125.         <div id="budget">
  126.  
  127.         <h1>Budget Slider</h1>
  128.            
  129.         </div> <!-- budget end-->
  130.  
  131.         <div id="location">
  132.  
  133.         <h1>North Bay City Hall</h1>
  134.            
  135.         </div> <!-- location end-->
  136.  
  137.         <div id="contact">
  138.             <h1>Contact Us</h1>
  139.         </div> <!-- contact end-->
  140.  
  141.         <footer>
  142.            
  143.             <a href="http://www.developmentmadesimple.com" target="new">Development made simple</a> &copy; 2015
  144.  
  145.         </footer>
  146.  
  147.     </main>
  148.  
  149.  
  150.     </body>
  151.  
  152.  
  153. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!