Search This Blog

2017/01/05

Tab select sample without redirect


Html:
<div class="tabs">
<ul>
<li><a id="tab_1" onclick="showTabContent(this.id);">Tab 1</a></li>
<li><a id="tab_2" onclick="showTabContent(this.id);">Tab 2</a></li>
<li><a id="tab_3" onclick="showTabContent(this.id);">Tab 3</a></li>
</ul>
</div>
<div class="tabContent" id="tabContent1">Content 1</div>
<div class="tabContent" id="tabContent2" style="display:none;">Content 2</div>


JavaScript:
<script>
function showTabContent(id){
  $('.tabContent').css.('display','none');
  if(id == "tab_1"){
    $('#tabContent1').css.("display","block");
  }elseif(id == "tab_2"){
    $('#tabContent2').css.("display","block");
  }else{
    alert("Not Found");
  }
}
</script>


No comments :

Post a Comment