Powered By Blogger

Tuesday, October 29, 2013

html taps : change the content same place

                                <ul id="tabs">
                                    <li name="#first"><a href="">Floor Plans</a></li>
                                    <li name="#second"><a href="">Location</a></li>
                                    <li name="#third"><a href="">Flats Details</a></li>
                                 
                                </ul>  
           <div class="icefun_content" id="sub-content">
            <div id="first" class="" style=";">
               
                    <a rel="example_group" href="images/detail1/b4.jpg" title=""><img class="last" alt="" src="images/detail1/s4.jpg" /></a>
                </div>
<div id="second" class="" style=";">
                
                    <a rel="example_group" href="images/detail1/b4.jpg" title=""><img class="last" alt="" src="images/detail1/s4.jpg" /></a>
                </div>
<div id="third" class="" style=";">
                
                    <a rel="example_group" href="images/detail1/b4.jpg" title=""><img class="last" alt="" src="images/detail1/s4.jpg" /></a>
                </div>
</div>
</div>




<script type="text/javascript">
$(document).ready(function(){

function resetTabs(){
$("#sub-content > div").hide();
$("#tabs li").attr("id","");      
}
var myUrl = window.location.href; 
var myUrlTab = myUrl.substring(myUrl.indexOf("#"));
var myUrlTabName = myUrlTab.substring(0,4);
(function(){
$("#sub-content > div").hide(); 
$("#tabs li:first-child").attr("id","s-menu-curr");
$("#sub-content > div:first").fadeIn(0);
$("#tabs li").on("click",function(e) {
e.preventDefault();
if ($(this).attr("id") == "s-menu-curr"){
return       
}
else{             
resetTabs();
$(this).attr("id","s-menu-curr"); 
$($(this).attr('name')).fadeIn(0); 
}
});
for (i = 1; i <= $("#tabs li").length; i++) {
 if (myUrlTab == myUrlTabName + i) {
 resetTabs();
 $("li[name='"+myUrlTab+"']").attr("id","s-menu-curr");
 $(myUrlTab).fadeIn(0);     
 }
}
})()

});


</script>

No comments:

Post a Comment