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