javascript - Change through list of photos in tab html -


hi i'm trying code html css , javascript website , i'm not used these language.

i have "tabs" created css ul in html, , wanted put pictures in them javascript linked image onclick can change through photos clicked them.

here code.

script function

<script>     function changeimage(){         var image = document.getelementbyid('myimage');         if(image.src.match("img/test/image1.jpg")){             image.src = "img/test/image2.jpg";         }         else if(image.src.match("img/test/image2.jpg")){             image.src = "img/test/image3.jpg";         }         else if(image.src.match("img/test/image3.jpg")){             image.src = "img/test/image4.jpg";         }         else if(image.src.match("img/test/image4.jpg")){             image.src = "img/test/image5.jpg";         }         else if(image.src.match("img/test/image5.jpg")){             image.src = "img/test/image1.jpg";         }     } </script>

html part

 <div class="tabs">   <ul class="tab-links">        <li class="active"><a href="#tab1">kitchenette</a></li>           <li><a href="#tab2">double queen</a></li>           <li><a href="#tab3">single queen</a></li>           <li><a href="#tab4">standard room</a></li>           <li><a href="#tab5">partial view room</a></li>  </ul>   <div class="tab-content">      <div id="tab1" class="tab active">         <table style="width:100%">            <tr>                 <td>                     <img src="img/test/image1.jpg" id="myimage" width="550" height="300" alt="room image" onclick="changeimage()" />                 </td>             </tr>            <tr>             <td>                  <p> description of room should in here. </p>             </td>         </tr>     </table> </div>  <div id="tab2" class="tab">     <table style="width:100%">         <tr>             <td>                 <img src="img/test/second/image1.jpg" id="myimage" width="550" height="300" alt="room image" onclick="changeimage2()" />             </td>         </tr>         <tr>             <td>                 <p> description of room should in here. </p>             </td>         </tr>     </table>      </div>

css part

/*----- tabs -----*/ .tabs {     width:100%;     display:inline-block; }      /*----- tab links -----*/     /* clearfix */     .tab-links:after {         display:block;         clear:both;         content:'';     }      .tab-links li {         margin:0px 2px;         float:left;         list-style:none;     }          .tab-links {             /*padding:5px 5px;*/             display:inline-block;             border-radius:3px 3px 0px 0px;             background:#7fb5da;             font-size:14px;             font-weight:600;             color:#4c4c4c;             transition:all linear 0.15s;         }          .tab-links a:hover {             background:#a7cce5;             text-decoration:none;         }      li.active a, li.active a:hover {         background:#fff;         color:#4c4c4c;     }      /*----- content of tabs -----*/     .tab-content {         /*padding:15px;*/         border-radius:4px;         box-shadow:-1px 1px 1px rgba(0,0,0,0.15);         background:#fff;     }          .tab {             display:none;         }          .tab.active {             display:block;         }

so problem i'm having first tab works fine if go second tab photo won't change instead first tab's photos changing.

so think onclick reads click of second tab's click , apply first tab i'm not sure this..

please me... i'm kind of trapped

have images within tabs , change script following.

$(document).ready(function() {      $('.tabs .tab-links a').on('click', function(e)  {          var currentattrvalue = jquery(this).attr('href');             // show/hide tabs          $('.tabs ' + currentattrvalue).show().siblings().hide();             // change/remove current tab active          $(this).parent('li').addclass('active').siblings().removeclass('active');             e.preventdefault();      });  });
/*----- tabs -----*/  .tabs {      width:100%;      display:inline-block;  }         /*----- tab links -----*/      /* clearfix */      .tab-links:after {          display:block;          clear:both;          content:'';      }         .tab-links li {          margin:0px 5px;          float:left;          list-style:none;      }             .tab-links {              padding:9px 15px;              display:inline-block;              border-radius:3px 3px 0px 0px;              background:#7fb5da;              font-size:16px;              font-weight:600;              color:#4c4c4c;              transition:all linear 0.15s;          }             .tab-links a:hover {              background:#a7cce5;              text-decoration:none;          }         li.active a, li.active a:hover {          background:#fff;          color:#4c4c4c;      }         /*----- content of tabs -----*/      .tab-content {          padding:15px;          border-radius:3px;          box-shadow:-1px 1px 1px rgba(0,0,0,0.15);          background:#fff;      }             .tab {              display:none;          }             .tab.active {              display:block;          }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="tabs">      <ul class="tab-links">         <li class="active"><a href="#tab1">kitchenette</a></li>            <li><a href="#tab2">double queen</a></li>            <li><a href="#tab3">single queen</a></li>            <li><a href="#tab4">standard room</a></li>            <li><a href="#tab5">partial view room</a></li>      </ul>         <div class="tab-content">          <div id="tab1" class="tab active">              <img src="/path/to/img1.jpg" alt="kitchenette" />              <p>description</p>          </div>             <div id="tab2" class="tab">              <img src="/path/to/img2.jpg" alt="double queen" />              <p>description</p>          </div>             <div id="tab3" class="tab">              <img src="/path/to/img3.jpg" alt="single queen" />              <p>description</p>          </div>             <div id="tab4" class="tab">              <img src="/path/to/img4.jpg" alt="standard room" />              <p>description</p>          </div>          <div id="tab5" class="tab">              <img src="/path/to/img5.jpg" alt="partial view room" />              <p>description</p>          </div>      </div>  </div>


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more