javascript - Why does my tab switch not work? -


i'm having difficult time figuring out why tabbed id not working or functioning should. on click, supposed replace text different (i.e. page under construction).

here have far..

html

<!doctype html> <html> <head>   <title>main page</title>  <!--main page title -->   <script type="text/javascript" scr="home_page.js"></script>   <link rel="stylesheet" type="text/css" href="home_page.css"/> </head> <body>    <h1> express shop </h1>   <div class="content">     <div class="navbar">       <ul>         <li><a href="#" title="home" class="active">home</a></li>         <li><a href="#" title="inventory">inventory</a></li>         <li><a href="#" title="directions">directions</a></li>         <li><a href="#" title="contact us">contact us</a></li>       </ul>   </div>    <div id="tab1" class="tab active">     <h3>welcome express shop!</h3>     <p>your 1 stop shop repairs! work various laptops, pcs, iphones, ipads, tablets, smart phones , more!</p>     <p> authorized dealer pageplus cellular , have many products in our inventory sale.</p>   </div>    <div id="tab2" class="tab">     <h3>inventory</h3>     <p>page under construction<p>   </div>    <div id="tab3" class="tab">     <h3>directions</h3>     <p>page under construction</p>   </div>    <div id="tab4" class="tab">     <h3>contact us</h3>     <p>page under construction</p>   </div>  </div>   </body>  </html>

css

h1 {   font:bold 65px/60px helvetica, arial, sans-serif;   text-shadow:0px 2px 6px #333; }  .content p {   margin:20px; }  .tab {    /*turn off display of tabs(in-active) */   display:none; }   .navbar {   position:relative;   margin:0px 0px 0px -40px;   /*border around tabs */ }  .navbar ul {   list-style:none; }  .navbar ul li {   display:inline-block; }   .navbar ul li:first-child {   -moz-border-radius-topleft:5px;   -webkit-border-top-left-radius:5px; }  .navbar ul li:last-child {   -moz-border-radius-topright:5px;   -webkit-border-top-right-radius:5px; }  .navbar ul li {   text-decoration:none;   font:bold 14px helvetica, sans-serif;   padding:10px;   margin-right:-7px;   /*border-radius:3px; */   background-color:#e0e0e0;   transition:all linear 0.15s; }  .navbar ul li a:hover {   background-color:rgb(255, 173, 10); }  /* needs fixed */ .navbar ul li a.active {   background-color:rgb(255, 173, 10); }  .tab.active {   display:inherit;   clear:both;   margin-top:-7px;   border:1px solid black;   width:700px;   -moz-border-radius-topright:5px;   -moz-border-radius-bottomright:5px;   -moz-border-radius-bottomleft:5px;   -webkit-border-top-right-radius:5px;   -webkit-border-bottom-right-radius:5px;   -webkit-border-bottom-left-radius:5px; }  h3 {   text-transform:uppercase;   padding:10px 0px 0px 10px;   color:black   text-shawdow:#000 0px 0px 2px; }

javascript

$(home_page.html).ready(function() {    $('navbar ul li a').click(function() {     var tab_id =$(this).attr('href');      $('navbar ul li a').removeclass('active');     $('tab').removeclass('active');      $(this).addclass('active');     $("#" + tab_id).addclass('active');   });  });

problems:

  • you need include jquery library in header, before own script
  • $(document).ready - makes code run when page loaded
  • when want select class, need add . before (just css), example had $('navbar ul li a') should $('.navbar ul li a')
  • in tab links, had href="#", need put correct id of tabs (e.g. #tab1), , since have # here, don't need again in $(tab_id)

i have fixed code , can try working version below:

$(document).ready(function() {      $('.navbar ul li a').click(function() {      var tab_id = $(this).attr('href');        $('.navbar ul li a').removeclass('active');      $('.tab').removeclass('active');        $(this).addclass('active');      $(tab_id).addclass('active');    });    });
h1 {    font:bold 65px/60px helvetica, arial, sans-serif;    text-shadow:0px 2px 6px #333;  }    .content p {    margin:20px;  }    .tab {    /*turn off display of tabs(in-active) */    display:none;  }      .navbar {    position:relative;    margin:0px 0px 0px -40px;    /*border around tabs */  }    .navbar ul {    list-style:none;  }    .navbar ul li {    display:inline-block;  }      .navbar ul li:first-child {    -moz-border-radius-topleft:5px;    -webkit-border-top-left-radius:5px;  }    .navbar ul li:last-child {    -moz-border-radius-topright:5px;    -webkit-border-top-right-radius:5px;  }    .navbar ul li {    text-decoration:none;    font:bold 14px helvetica, sans-serif;    padding:10px;    margin-right:-7px;    /*border-radius:3px; */    background-color:#e0e0e0;    transition:all linear 0.15s;  }    .navbar ul li a:hover {    background-color:rgb(255, 173, 10);  }    /* needs fixed */  .navbar ul li a.active {    background-color:rgb(255, 173, 10);  }    .tab.active {    display:inherit;    clear:both;    margin-top:-7px;    border:1px solid black;    width:700px;    -moz-border-radius-topright:5px;    -moz-border-radius-bottomright:5px;    -moz-border-radius-bottomleft:5px;    -webkit-border-top-right-radius:5px;    -webkit-border-bottom-right-radius:5px;    -webkit-border-bottom-left-radius:5px;  }    h3 {    text-transform:uppercase;    padding:10px 0px 0px 10px;    color:black    text-shawdow:#000 0px 0px 2px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <h1> express shop </h1>    <div class="content">      <div class="navbar">        <ul>          <li><a href="#tab1" title="home" class="active">home</a></li>          <li><a href="#tab2" title="inventory">inventory</a></li>          <li><a href="#tab3" title="directions">directions</a></li>          <li><a href="#tab4" title="contact us">contact us</a></li>        </ul>    </div>      <div id="tab1" class="tab active">      <h3>welcome express shop!</h3>      <p>your 1 stop shop repairs! work various laptops, pcs, iphones, ipads, tablets, smart phones , more!</p>      <p> authorized dealer pageplus cellular , have many products in our inventory sale.</p>    </div>      <div id="tab2" class="tab">      <h3>inventory</h3>      <p>page under construction<p>    </div>      <div id="tab3" class="tab">      <h3>directions</h3>      <p>page under construction</p>    </div>      <div id="tab4" class="tab">      <h3>contact us</h3>      <p>page under construction</p>    </div>    </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more