0 votes
1 view
in Java by (9.2k points)

Below is my Html and Css code which I have written so far to make multiple tabs on a page when the user clicks the buttons on the menu for the page to pop up. The URL has to remain the same in this process.

div.tabContent.hide {

  display: none;

}

nav {

  background: rgba(0, 0, 0, 0);

  height: 80px;

  border-radius: 0px;

}

nav ul {

  width: 50%;

  margin: auto;

}

nav ul li {

  list-style-type: none;

  width: 150px;

  margin-top: 15px;

  float: left;

  border: none;

  text-align: center;

}

li a {

  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

  text-decoration: none;

  color: #333333;

  border-radius: 0px;

  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);

  line-height: 50px;

  display: block;

  transition: all ease-in-out 250ms;

}

li a:hover {

  background: rgba(255, 255, 255, .2);

  box-shadow: 0 8px 8px -6px #333;

  color: #222222;

  padding: 0px 0px;

  text-shadow: 0 2px 4px rgba(0, 0, 0, .5);

}

<nav>

Can anyone tell me how to do it?

1 Answer

0 votes
by (19k points)

Please check the code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

   <head>

  <!-- This page is copyright Elated Communications Ltd. (www.elated.com) -->

    <title>JavaScript tabs example</title>

  <style type="text/css">

   body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans- Serif; }

   ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0;       }

   ul#tabs li { display: inline; }

   ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px  solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }

   ul#tabs li a:hover { background-color: #f1f0ee; }

   ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-  weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }

   div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-  color: #f1f0ee; }

  div.tabContent.hide { display: none; }

 </style>

 <script type="text/javascript">

 //<![CDATA[

 var tabLinks = new Array();

 var contentDivs = new Array();

 function init() {

  // Grab the tab links and content divs from the page

  var tabListItems = document.getElementById('tabs').childNodes;

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

    if ( tabListItems[i].nodeName == "LI" ) {

      var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );

      var id = getHash( tabLink.getAttribute('href') );

      tabLinks[id] = tabLink;

      contentDivs[id] = document.getElementById( id );

    }

  }

  // Assign onclick events to the tab links, and

  // highlight the first tab

  var i = 0;

  for ( var id in tabLinks ) {

    tabLinks[id].onclick = showTab;

    tabLinks[id].onfocus = function() { this.blur() };

    if ( i == 0 ) tabLinks[id].className = 'selected';

    i++;

  }

  // Hide all content divs except the first

  var i = 0;

  for ( var id in contentDivs ) {

    if ( i != 0 ) contentDivs[id].className = 'tabContent hide';

    i++;

  }

 }

  function showTab() {

   var selectedId = getHash( this.getAttribute('href') );

   // Highlight the selected tab, and dim all others.

   // Also show the selected content div, and hide all others.

   for ( var id in contentDivs ) {

    if ( id == selectedId ) {

      tabLinks[id].className = 'selected';

      contentDivs[id].className = 'tabContent';

    } else {

      tabLinks[id].className = '';

      contentDivs[id].className = 'tabContent hide';

    }

  }

  // Stop the browser following the link

  return false;

   }

   function getFirstChildWithTagName( element, tagName ) {

    for ( var i = 0; i < element.childNodes.length; i++ ) {

     if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];

    }

   }

 function getHash( url ) {

   var hashPos = url.lastIndexOf ( '#' );

   return url.substring( hashPos + 1 );

 }

 //]]>

  </script>

 </head>

 <body onload="init()">

  <h1>JavaScript tabs example</h1>

   <ul id="tabs">

  <li><a href="#about">About JavaScript tabs</a></li>

  <li><a href="#advantages">Advantages of tabs</a></li>

  <li><a href="#usage">Using tabs</a></li>

   </ul>

    <div class="tabContent" id="about">

    <h2>About JavaScript tabs</h2>

    <div>

    <p>JavaScript tabs partition your Web page content into tabbed sections.  Only one section at a time is visible.</p>

    <p>The code is written in such a way that the page degrades gracefully  in browsers that don't support JavaScript or CSS.</p>

   </div>

   </div>

   <div class="tabContent" id="advantages">

   <h2>Advantages of tabs</h2>

   <div>

    <p>JavaScript tabs are great if your Web page contains a large amount of content.</p>

    <p>They're also good for things like multi-step Web forms.</p>

  </div>

  </div>

  <div class="tabContent" id="usage">

  <h2>Using tabs</h2>

  <div>

    <p>Click a tab to view the tab's content. Using tabs couldn't be easier!   </p>

  </div>

  </div>


 

 </body>

</html>




 

Interested in Java? Check out this Java tutorial by Intellipaat.   

Related questions

0 votes
1 answer
0 votes
1 answer
0 votes
1 answer
Welcome to Intellipaat Community. Get your technical queries answered by top developers !


Categories

...