Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

सीएसएस और जावास्क्रिप्ट के साथ एक लंबवत टैब मेनू कैसे बनाएं?


सीएसएस और जावास्क्रिप्ट के साथ एक लंबवत टैब मेनू बनाने के लिए, कोड इस प्रकार है -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
   box-sizing: border-box
}
.tab {
   float: left;
   border: 1px solid blue;
   background-color: black;
   width: 20%;
   height: 200px;
}
.tab button {
   display: block;
   background-color: inherit;
   color: white;
   padding: 22px 16px;
   width: 100%;
   border: none;
   outline: none;
   text-align: left;
   cursor: pointer;
   transition: 0.3s;
   font-size: 17px;
}
.tab button:hover {
   background-color: gray;
}
.tab button.active {
   background-color: #006400;
}
.demo2 {
   float: left;
   padding: 0px 10px;
   border: 1px solid;
   width: 70%;
   border-left: none;
   height: 200px;
}
</style>
</head>
<body>
<h2>Examination</h2>
<p>Following is the exam information:</p>
<div class="tab">
   <button class="demo" onclick="infofunc(event, 'dates')" id="current">Exam Dates</button>
   <button class="demo" onclick="infofunc(event, 'centre')">Exam Centre</button>
</div>
<div id="dates" class="demo2">
   <h3>Dates</h3>
   <p>Exam date will be announced on 25th March.</p>
</div>
<div id="centre" class="demo2">
   <h3>Centre</h3>
   <p>Exam Centre will be announced on 30th March.</p>
</div>
<script>
function infofunc(e, info) {
   var i, content, links;
   content = document.getElementsByClassName("demo2");
   for (i = 0; i < content.length; i++) {
      content[i].style.display = "none";
   }
   links = document.getElementsByClassName("demo");
   for (i = 0; i < links.length; i++) {
      links[i].className = links[i].className.replace(" active", "");
   }
   document.getElementById(info).style.display = "block";
   e.currentTarget.className += " active";
}
document.getElementById("current").click();
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

सीएसएस और जावास्क्रिप्ट के साथ एक लंबवत टैब मेनू कैसे बनाएं?

किसी भी टैब पर क्लिक करें, मान लें कि "परीक्षा केंद्र" -

सीएसएस और जावास्क्रिप्ट के साथ एक लंबवत टैब मेनू कैसे बनाएं?


  1. सीएसएस और जावास्क्रिप्ट के साथ एक संक्षिप्त अनुभाग कैसे बनाएं?

    सीएसएस और जावास्क्रिप्ट के साथ एक संक्षिप्त अनुभाग बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-fami

  1. सीएसएस और जावास्क्रिप्ट के साथ स्नैकबार/टोस्ट कैसे बनाएं?

    CSS और JavaScript के साथ स्नैकबार/टोस्ट बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "S

  1. CSS और JavaScript के साथ अकॉर्डियन कैसे बनाएं?

    सीएसएस और जावास्क्रिप्ट के साथ एक अकॉर्डियन बनाने के लिए, कोड इस प्रकार है - उदाहरण <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .demo {    background-color: #eee;    c