Difference between revisions of "Team:Melbourne/Project"

Line 3: Line 3:
  
 
<script>
 
<script>
−
function openCity(cityName) {
+
function openCity(evt, cityName) {
−
    var i;
+
  var i, x, tablinks;
−
    var x = document.getElementsByClassName("city");
+
  x = document.getElementsByClassName("city");
−
    for (i = 0; i < x.length; i++) {
+
  for (i = 0; i < x.length; i++) {
−
        x[i].style.display = "none";  
+
    x[i].style.display = "none";
−
    }
+
  }
−
    document.getElementById(cityName).style.display = "block";  
+
  tablinks = document.getElementsByClassName("tablink");
 +
  for (i = 0; i < x.length; i++) {
 +
    tablinks[i].className = tablinks[i].className.replace(" w3-border-red", "");
 +
  }
 +
  document.getElementById(cityName).style.display = "block";
 +
  evt.currentTarget.firstElementChild.className += " w3-border-red";
 
}
 
}
 
</script>
 
</script>
 +
  
 
<head>
 
<head>
Line 27: Line 33:
 
<br><br><br><br><br><br>
 
<br><br><br><br><br><br>
 
<br><br><br><br><br><br>
 
<br><br><br><br><br><br>
−
<div class="w3-bar w3-black">
 
−
  <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
 
−
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
 
−
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
 
−
</div>
 
  
 +
<h2>Tabs in a Grid</h2>
  
 +
  <div class="w3-row">
 +
    <a href="javascript:void(0)" onclick="openCity(event, 'London');">
 +
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">London</div>
 +
    </a>
 +
    <a href="javascript:void(0)" onclick="openCity(event, 'Paris');">
 +
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Paris</div>
 +
    </a>
 +
    <a href="javascript:void(0)" onclick="openCity(event, 'Tokyo');">
 +
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Tokyo</div>
 +
    </a>
 +
  </div>
  
 +
  <div id="London" class="w3-container city" style="display:none">
 +
    <h2>London</h2>
 +
    <p>London is the capital city of England.</p>
 +
  </div>
  
−
<div id="London" class="city">
+
  <div id="Paris" class="w3-container city" style="display:none">
−
  <h2>London</h2>
+
    <h2>Paris</h2>
−
  <p>London is the capital of England.</p>
+
    <p>Paris is the capital of France.</p>  
−
</div>
+
  </div>
  
−
<div id="Paris" class="city" style="display:none">
+
  <div id="Tokyo" class="w3-container city" style="display:none">
−
  <h2>Paris</h2>
+
    <h2>Tokyo</h2>
−
  <p>Paris is the capital of France.</p>  
+
    <p>Tokyo is the capital of Japan.</p>
 +
  </div>
 
</div>
 
</div>
  
−
<div id="Tokyo" class="city" style="display:none">
+
 
−
  <h2>Tokyo</h2>
+
−
  <p>Tokyo is the capital of Japan.</p>
+
−
</div>
+
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 12:20, 16 October 2018

Melbourne Team Site Wiki











Tabs in a Grid

<div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">London</div> <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Paris</div> <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">Tokyo</div>