How to create tab with javascript

最新推荐文章于 2021-03-23 23:12:56 发布

原创最新推荐文章于 2021-03-23 23:12:56 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#tab #javascript #html #css #simple #ViewUI

软件程式-JavaScript 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用简单的JavaScript代码结合HTML和CSS创建交互式的选项卡效果。通过实例演示了如何设置HTML结构、CSS样式及JavaScript逻辑来实现平滑切换内容的功能。

How to create tab with javascript

This tutorial explains how to create a tab using jquery and simple javascript. Both techniques are very simple and short. You create a simple tab with JavaScript, html and css. Lets look the example.

Demo

HTML Code

  <div class="tab-box"> 
    <a href="javascript:;" class="tabLink activeLink" id="cont-1">Tab 1</a> 
    <a href="javascript:;" class="tabLink " id="cont-2">Tab 2</a> 
    <a href="javascript:;" class="tabLink " id="cont-3">Tab 3</a> 
  </div>
  
  <div class="tabcontent paddingAll" id="cont-1-1"> 
    This is content box one 
  </div>
  
  <div class="tabcontent paddingAll hide" id="cont-2-1"> 
    This is content box Two 
  </div> 
  
  <div class="tabcontent paddingAll hide" id="cont-3-1"> 
    This is content box Three 
  </div>

- id=cont-1 is define for tab content one (cont-1-1)
- id=cont-2 is define for tab content two (cont-2-1) if you want to add more tab just add the id cont-? and also add concern id with ï¿½1 in tab content box
- activeLink class for active tab
- tablink class is used in javascript for change the tab

CSS Code

.tab-box { 
  border-bottom: 1px solid #DDD;
  padding-bottom:5px;
}
.tab-box a {
  border:1px solid #DDD;
  color:#666666;
  padding: 5px 15px;
  text-decoration:none;
  background-color: #eee;
}
.tab-box a.activeLink { 
  background-color: #fff; 
  border-bottom: 0; 
  padding: 6px 15px;
}
.tabcontent { border: 1px solid #ddd; border-top: 0;}
.hide { display: none;}

JavaScript Code

Add Latest Jquery file and write below code

<script type="text/javascript">
  $(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;	  
      });
    });  
  });
</script>

how to call a second div through URL Asked by Hariswebs

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

	webPath= document.location.href;
	webPathSplit=webPath.split("#");
	webPathName= webPathSplit[1]+ "1"; /* Hack for check its blank or not */

	if(webPathName=='undefined1') {
	}else{
		openTab=webPathSplit[1];
        $(".tabLink").removeClass("activeLink");
        $("#"+openTab).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+openTab+"-1").removeClass("hide")   
	}

    $(".tabLink").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        //return false;	  
      });
    });  
  });
</script>

In the above JavaScript class .tabLink is being check in every click. As per click we add or remove hide class in tab content box.

Download Source