জাভাস্ক্রিপ্টে ট্যাব
এখন আমরা ট্যাব বাস্তবায়ন করব। অবিলম্বে আপনার যা প্রয়োজন তার একটি নমুনা দেখুন:
আমরা যে মার্কআপে সমস্যার সমাধান করব সেটিও অধ্যয়ন করুন:
<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 কোডগুলি নিজের কাছে কপি করুন। বর্ণিত অ্যালগরিদম অনুসারে ট্যাবগুলি বাস্তবায়ন করুন।
