Bootstrap kütühanesini kullanmadan CSS ve JavaScript kullanarak sekmeli içerik nasıl oluşturulur? Aslında çok basit. CSS ile özellikleri belirler, javascript ile de sekmelerin açılmasını sağlayabilirsiniz. Örnek kodlar aşağıdaki gibidir:
<!DOCTYPE html>
<html>
<head>
<title>HTML TAB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tabcontent{
border:1px solid #ccc;
border-top:none;
padding:10px;
display: none;
}
.tab {
overflow: hidden;
border:1px solid #ccc;
background-color: #f2f2f2;
}
.tab button{
border:none;
float:left;
padding:4px 10px;
cursor: pointer;
font-size: 16px;
}
.tab button:hover{
background-color: #aaa;
}
</style>
</head>
<body>
<div class="tab">
<button onclick="icerik('html')">HTML</button>
<button onclick="icerik('css')">CSS</button>
<button onclick="icerik('jscript')" id="default">JavaScript</button>
<button onclick="icerik('jquery')">Jquery</button>
</div>
<div id="html" class="tabcontent">
<h3>HTML</h3>
<p>HTML Hakkında Bilgiler</p>
</div>
<div id="css" class="tabcontent">
<h3>CSS</h3>
<p>CSS Hakkında Bilgiler</p>
</div>
<div id="jscript" class="tabcontent">
<h3>JavaScript</h3>
<p>JavaScript Hakkında Bilgiler</p>
</div>
<div id="jquery" class="tabcontent">
<h3>JQuery</h3>
<p>JQuery Hakkında Bilgiler</p>
</div>
<script>
function icerik(divid) {
var x, tabcontent;
tabcontent=document.getElementsByClassName("tabcontent");
for(x=0;x<tabcontent.length;x++) {
tabcontent[x].style.display="none";
}
document.getElementById(divid).style.display="block";
}
document.getElementById("default").click();
</script>
</body>
</html>
