जावास्क्रिप्ट पर टैब
अब हम टैब लागू करेंगे। तुरंत नमूना देखें कि आपसे क्या आवश्यक है:
उस मार्कअप का भी अध्ययन करें, जिस पर हम समस्या का समाधान करेंगे:
<div id="parent">
<div class="menu">
<a href="" class="active">टैब 1</a>
<a href="">टैब 2</a>
<a href="">टैब 3</a>
</div>
<div class="tabs">
<div class="tab active">
टैब 1 का पाठ
</div>
<div class="tab">
टैब 2 का पाठ
</div>
<div class="tab">
टैब 3 का पाठ
</div>
</div>
</div>
#parent {
margin: 0 auto;
width: 400px;
}
.menu a {
margin-right: 5px;
display: inline-block;
padding: 10px;
color: black;
text-decoration: none;
border: 1px solid gray;
}
.menu a:hover {
background: #f8f8f8;
}
.menu a.active {
border-color: transparent;
background: #f2f2f2;
}
.tabs .tab:not(.active) {
display: none;
}
.tabs .tab {
padding: 10px;
background: #f2f2f2;
height: 300px;
}
इस बात पर ध्यान दें कि सक्रिय लिंक
और सक्रिय टैब में active वर्ग होता है।
चर्चा
आइए अब चर्चा करें कि इस समस्या का समाधान कैसे किया जाए। जाहिर है, कि लिंक को संबंधित टैब से किसी तरह जोड़ना होगा। सैद्धांतिक पाठ्यपुस्तक के इस पाठ में हमने संभावित विकल्पों पर पहले ही चर्चा कर ली है।
इस मामले में, मैं सुझाव देता हूं कि लिंक और टैब को केवल स्थिति से जोड़ दें: पहला लिंक पहला टैब खोलेगा, दूसरा लिंक - दूसरा टैब और इसी तरह आगे भी।
सामान्य एल्गोरिदम इस तरह दिखेगा: बटन पर क्लिक करने पर हमें उस वर्ग वाले लिंक को ढूंढना चाहिए और उस वर्ग को हटा देना चाहिए। इसी तरह हमें उस वर्ग वाले टैब को ढूंढना चाहिए और उस वर्ग को भी हटा देना चाहिए।
फिर हमें उस लिंक को लेना चाहिए, जिस पर क्लिक किया गया था और उसे सक्रिय करना चाहिए। फिर हमें उस टैब को लेना चाहिए, जिसकी संख्या वही हो, जो हमारे लिंक की है - और उसे भी सक्रिय करना चाहिए।
दिए गए HTML और CSS कोड की प्रतिलिपि बनाएँ। वर्णित एल्गोरिदम के अनुसार टैब लागू करें।
