Make tab change by JS
code
1 min readFeb 15, 2019
#tab.html
<html>
<head>
<meta charset="utf-8">
<title>TAB</title>
<link rel="stylesheet" type="text/css" href="tab.css">
</head>
<body>
<div class="tabs">
<a href="#view1" class="tab active">TAB1</a>
<a href="#view2" class="tab">TAB2</a>
<a href="#view3" class="tab">TAB3</a>
</div>
<div class="contents">
<img src ="https://fakeimg.pl/250x100/0000FF/" class = "content active">
<img src ="https://fakeimg.pl/250x100/00FF00/" class = "content">
<img src ="https://fakeimg.pl/250x100/FF0000/" class = "content">
</div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="tab.js"></script>
</body>
</html>#tab.js
var tab = $(".tab")
var content = $(".content")tab.on("click", function(){
var i = $(this).index()
tab.not(i).removeClass("active")
tab.eq(i).addClass("active")
content.not(i).removeClass("active")
content.eq(i).addClass("active")
})
Points
- Add class to element to avoid affecting the same all elements.
- Using not(i) and eq(i), if tabs and contents class increase, the code of JS doesn’t increase.
