Tab

Posted by On 3月 02, 2016 0 Comment

Tab in Web

How to create tab in webpage.

Bootstrap

Bootstrap has tab feature work with js and css
By including bootstrap.js and adding class, we can realize tab feature without additional implementation.

HTML

<html>
<head>
   <title>UI Test</title>
   <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="./css/header.css">
   <link rel="stylesheet" type="text/css" href="./css/tabs.css">
   <script src="../bower_components/jquery/dist/jquery.min.js"></script>
   <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
   <header>
   </header>
   <div class="contents">
   <ul class="nav nav-tabs">
     <li class="taball active"><a class="tablink" href="#tab1" data-toggle="tab">1</a></li>
     <li class="taball"><a class="tablink" href="#tab2" data-toggle="tab">2</a></li>
   </ul>
   <div id="myTabContent" class="tab-content">
     <div class="tab-pane fade in active" id="tab1">
       <p>Contents1</p>
     </div>
     <div class="tab-pane fade" id="tab2">
       <p>Contents2</p>
     </div>
   </div>
   </div>
</div>
</body>
</html>

CSS

We can override css
This is an example

div.contents {
  padding: 50px;
}

li.taball {
  width: 50%;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  border-style: none;
}

a.tablink {
  border-style: none;
}

.nav-tabs {
  border-style: none;
}

Result

tab

CSS, jQuery

Bootstrap has original design, and difficult to customize for you.
We can create tab design by myself.

I create tab design with jquery and angular(angular is for controller)

HTML

<html>
<head>
   <title>UI Test</title>
   <link rel="stylesheet" type="text/css" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="./css/header.css">
   <link rel="stylesheet" type="text/css" href="./css/tab2.css">
   <script src="../bower_components/jquery/dist/jquery.min.js"></script>
   <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
   <script src="../bower_components/angular/angular.min.js"></script>
   <script src="js/tab.js"></script>
</head>
<body ng-app="appModule" ng-controller="pageController">
<div class="container">
   <header>
   </header>
   <div class="contents">
      <ul class="tabui">
	<li id="tabmenu1" class="tabui on" ng-click="clicktab1()">1</li>
 	<li id="tabmenu2" class="tabui off" ng-click="clicktab2()">2</li>
      </ul>
   </div>
   <div id="tab1" class="tab">
      <p>Contents1</p>
   </div>
   <div id="tab2" class="tab hidecontent">
      <p>Contents2</p>
   </div>
</div>
</body>
</html>

CSS(tab2.css)

Skip header parts.
The core parts are ui, li, div.hidecontent

.conteiner {
   margin: 0;
   padding: 0;
   width: 100%;
}

div.contents {
  margin-top: 50px;
}

div.contents {
  width: 100%;
}

ul.tabui {
  margin: 0;
  padding: 0;
}

li.tabui {
  float:left;
  display:block;
  width: 50%;
  text-align: center;
  background-color:#ffcccc;
}

li.on  {background-color:#ff3333;}


div.hidecontent {
   display: none;
}

JavaScript



javascript(tab.js)


var appModule = angular.module("appModule",[]);

appModule.controller('pageController', function($scope){
  $scope.clicktab1 = function() {
       $("#tab2").addClass("hidecontent");
       $("#tabmenu2").removeClass("on");	
       $("#tab1").removeClass("hidecontent");
       $("#tabmenu1").addClass("on");
   }

   $scope.clicktab2 = function() {
       $("#tab1").addClass("hidecontent");
       $("#tabmenu1").removeClass("on");
       $("#tab2").removeClass("hidecontent");
       $("#tabmenu2").addClass("on");
   }
});



Result


tab2

  					

 			 
	
			 
					   					

										

						TOPICS