jQuery opdrachten

Boomstructuur

De HTML code voor deze opdracht:

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Boom</title>
  <style type="text/css">
    html {
      height: 100%;
    }
    body {
      margin: 0px;
      height: 100%;
    }
    .beschikbarehoogte {
      height: 100%;
    }
    #boom {
      padding-left: 24px;
      margin-left: 0px;
    }
    #boom ul {
      padding-left: 24px;
      margin-left: 0px;
    }
    #boom li {
      /* Selecteren beletten */
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      list-style-type: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <table width="100%%" border="0" class="beschikbarehoogte">
    <tr>
      <td width="200" valign="top">
	<ul id="boom">
	  <li class="submenu">Webdesign
	    <ul>
	      <li class="submenu">Dreamweaver
		<ul>
		  <li class="item"><a href="boom/webdesign/dreamweaver/deel1.html" target="inhoud">Deel 1</a></li>
		  <li class="item"><a href="boom/webdesign/dreamweaver/deel2.html" target="inhoud">Deel 2</a></li>
		  <li class="item"><a href="boom/webdesign/dreamweaver/eindwerk.html" target="inhoud">Eindwerk</a></li>
		</ul>
	      </li>
	      <li class="item"><a href="boom/webdesign/javascript/javascript.html" target="inhoud">Javascript</a></li>
	      <li class="item"><a href="boom/webdesign/php/php.html" target="inhoud">PHP</a></li>
	    </ul>
	  </li>
	  <li class="submenu">Kantoor
	    <ul>
	      <li class="submenu">Tekstverwerking
		<ul>
		  <li class="item"><a href="boom/kantoor/tekstverwerking/deel1.html" target="inhoud">Deel 1</a></li>
		  <li class="item"><a href="boom/kantoor/tekstverwerking/deel2.html" target="inhoud">Deel 2</a></li>
		</ul>
	      </li>
	      <li class="submenu">Rekenblad
		<ul>
		  <li class="item"><a href="boom/kantoor/rekenblad/deel1.html" target="inhoud">Deel 1</a></li>
		  <li class="item"><a href="boom/kantoor/rekenblad/deel2.html" target="inhoud">Deel 2</a></li>
		  <li class="item"><a href="boom/kantoor/rekenblad/programmeren1.html" target="inhoud">Programmeren 1</a></li>
		  <li class="item"><a href="boom/kantoor/rekenblad/programmeren2.html" target="inhoud">Programmeren 2</a></li>
		</ul>
	      </li>
	      <li class="submenu">Database
		<ul>
		  <li class="item"><a href="boom/kantoor/database/deel1.html" target="inhoud">Deel 1</a></li>
		  <li class="item"><a href="boom/kantoor/database/deel2.html" target="inhoud">Deel 2</a></li>
		  <li class="item"><a href="boom/kantoor/database/programmeren1.html" target="inhoud">Programmeren 1</a></li>
		  <li class="item"><a href="boom/kantoor/database/programmeren2.html" target="inhoud">Programmeren 2</a></li>
		  <li class="item"><a href="boom/kantoor/database/programmeren3.html" target="inhoud">Programmeren 3</a></li>
		</ul>
	      </li>
	    </ul>
	  </li>
	</ul>
      </td>
      <td class="beschikbarehoogte">
	<iframe src="" name="inhoud" width="100%" height="100%" scrolling="auto" frameborder="0"></iframe>
      </td>
    </tr>
  </table>
</body>
</html>

Zorg dat je op deze pagina jQuery kunt gebruiken.

Na de laden van de webpagina

Weergeven