Difference between revisions of "Team:Melbourne/Project"

Line 3: Line 3:
  
 
<script>
 
<script>
−
function openCity(evt, cityName) {
+
function openCity(cityName) {
−
  var i, x, tablinks;
+
    var i;
−
  x = document.getElementsByClassName("city");
+
    var 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";  
−
  }
+
    }
−
  tablinks = document.getElementsByClassName("tablink");
+
    document.getElementById(cityName).style.display = "block";  
−
  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 34: Line 28:
 
<br><br><br><br><br><br>
 
<br><br><br><br><br><br>
  
−
<h2>Tabs in a Grid</h2>
 
  
−
  <div class="w3-row">
+
<div class="w3-bar w3-black">
−
    <a href="javascript:void(0)" onclick="openCity(event, 'London');">
+
  <button class="w3-bar-item w3-button" onclick="openCity('London')">London</button>
−
      <div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding">London</div>
+
  <button class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
−
    </a>
+
  <button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
−
    <a href="javascript:void(0)" onclick="openCity(event, 'Paris');">
+
</div>
−
      <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="Paris" class="w3-container city" style="display:none">
 
−
    <h2>Paris</h2>
 
−
    <p>Paris is the capital of France.</p>
 
−
  </div>
 
  
−
  <div id="Tokyo" class="w3-container city" style="display:none">
+
<div id="London" class="city">
−
    <h2>Tokyo</h2>
+
  <h2>Experiment</h2>
−
    <p>Tokyo is the capital of Japan.</p>
+
  <p></p>
−
  </div>
+
 
</div>
 
</div>
  
 +
<div id="Paris" class="city" style="display:none">
 +
  <h2>Notebook</h2>
 +
  <p>Paris is the capital of France.</p>
 +
</div>
  
 +
<div id="Tokyo" class="city" style="display:none">
 +
  <h2>Attribution</h2>
 +
  <p>Tokyo is the capital of Japan.</p>
 +
</div>
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 12:24, 16 October 2018

Melbourne Team Site Wiki











Experiment