javascript - Tab content won't show on tab click -

-

i have tabs, won't show it's content when click tab button. home tab seems work, though content supposed hidden until clicked on. other tabs not working still. using google chrome.

document.getelementbyid("home").style.display = "inline";  var tablinks = new array();  var contentdivs = new array();    function init() {      var tablistitems = document.getelementbyid('tabs').childnodes;    (var = 0; < 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);      }    }      var = 0;      (var id in tablinks) {      tablinks[id].onclick = showtab();      tablinks[id].onfocus = function() {        this.blur()      };      if (i == 0) tablinks[id].classname = 'selected';      i++;    }      var = 0;      (var id in contentdivs) {      if (i != 0) contentdivs[id].classname = 'tabcontent hide';      i++;    }  }    function showtab() {    var selectedid = gethash(this.getattribute('href'));      (var id in contentdivs) {      if (id == selectedid) {        tablinks[id].classname = 'selected';        contentdivs[id].classname = 'tabcontent';      } else {        tablinks[id].classname = '';        contentdivs[id].classname = 'tabcontent hide';      }    }      return false;  }    function getfirstchildwithtagname(element, tagname) {    (var = 0; < 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);  }
body {    background: url('image/bg1.png');  }  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 {    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: 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);  }  .theme {    background: rgba(0, 0, 0, 0);    float: left;    width: 80px;    text-align: center;    margin-left: 15px;    padding: 10px 15px;    color: #111;    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);    border: none;    transition: ease-in-out 250ms;  }  .theme:hover {    cursor: pointer;    background: rgba(255, 255, 255, .3);    color: #000;    text-shadow: 0 2px 2px rgba(0, 0, 0, .6);    box-shadow: 0 8px 10px -6px #333;    transition: ease-in-out 150ms;    border: none;  }  .theme:active {    background: rgba(255, 255, 255, .3);    padding: 10px 15px;    box-shadow: 0 0 0 #333;    color: #000;    text-shadow: 0 0 0 rgba(0, 0, 0, .6);    border: none;  }  .box {    font-family: "lucida sans unicode", "lucida grande", sans-serif;    padding: 100px 200px;    background: rgba(255, 255, 255, .3);    box-shadow: 0 10px 15px -6px #333;  }  div.tabcontent {    display: none;  }  hr.style {    border: 0;    height: 0;    border-top: 1px solid rgba(0, 0, 0, 0.1);    border-bottom: 1px solid rgba(255, 255, 255, 0.3);  }  #ordertabs:hover {    background: #ab1f1f;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <!doctype html>  <html lang="en-us">    <head>  </head>    <body onload="init()">    <nav>      <ul id="tabs">        <li>          <a href="#home" style="font-weight: bold;">home</a>        </li>        <li>          <a href="#products" style="font-weight: bold;">products</a>        </li>        <li>          <a href="#order" style="font-weight: bold;">order</a>        </li>        <li>          <a href="#settings" style="font-weight: bold;">settings</a>        </li>      </ul>    </nav>      <hr class="style"></hr>      <div class="tabcontent" id="home">      <div class="box">        <h2>welcome</h2>        <div>          <p></p>          <p></p>        </div>      </div>    </div>      <div class="tabcontent" id="products">      <div class="box">        <h2>products</h2>        <div>          <p></p>          <p></p>        </div>      </div>    </div>      <div class="tabcontent" id="order">      <div class="box">        <h2>ready fail?</h2>        <div>          <p></p>          <ul id="tabs2">	<a href="#order" style="font-weight: bold;">click fail</a>          </ul>          <div class="tabcontent2">            <div class="box">              <h2>if reading this, failed.</h2>              <div>                <p></p>                <p></p>              </div>            </div>          </div>        </div>      </div>    </div>    </p>    </div>  </body>    </html>

you getting following error in console:

uncaught typeerror: this.getattribute not function

this error comes following line:

tablinks[id].onclick = showtab();

you have use function reference, otherwise executed javascript engine gets parse line, change follows:

tablinks[id].onclick = showtab;

Comments

Post a Comment

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

-
Image
i try , create radar chart using chart.js has various colours each scaleline, or coloured between scalelines. wondering if possible? from: to: i have working graph, though there doesn't seem method change individual scale lines. kind regards leigh you can extend radar chart type this, so chart.types.radar.extend({ name: "radaralt", initialize: function (data) { chart.types.radar.prototype.initialize.apply(this, arguments); var originalscaledraw = this.scale.draw; var ctx = this.chart.ctx; this.scale.draw = function () { var linewidth = this.linewidth; // bypasses line drawing in originalscaledraw this.linewidth = linewidth; originalscaledraw.apply(this, arguments); ctx.linewidth = this.linewidth; var scale = this; // draw chart.helpers.each(scale.ylabels, function (label, index) { // color of ...
Read more

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

-
suddenly have started receiving above error without changes having been made script. host 1and1 (i know...) the script still works fine on different server, , suspicion there must have been server config change has lead this, although hosts plead ignorance. there's no information on above error @ in google can find - have ideas? server running apache if helps. had similar problem. came out of blue. no php code changed. what changed: php upgraded 5.5.25-1 5.5.26. a security risk in php mail() function has been fixed , newlines in additional_headers allowed no more. because newlines mean: starts email message (and surely don't want inject newlines through headers followed evil message). what have worked fine, e.g. having newlines after headers or passing whole message additional_headers , function no more. solution : sanitize headers. no multiple newlines in additional_headers argument. these count "multiple or malformed newlines":...
Read more

java - Android – MapFragment overlay button shadow, just like MyLocation button -

-
Image
i'm struggling add shadow custom overlay button on google map. goal make custom button google's mylocation button. here's how app looks now: layout.xml <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:map="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent" style="@style/apptheme"> <fragment android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/map" tools:context=".mapsactivity" android:name="com.google.android.gms.maps.supportmapfragment" android:layout_alignparentend="true" android:layout_alignparentstart="true" android:layout_alignparentbottom="true" ...
Read more