JavaScript හි ටැබ්
දැන් අපි ටැබ් ක්රියාත්මක කරමු. පළමුවෙන්ම ඔබගෙන් අපේක්ෂා කරන දේ ආදර්ශය බලන්න:
අපි ගැටලුව විසඳන ලේඛනය ද අධ්යයනය කරන්න:
<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 කේත ඔබ වෙත පිටපත් කර ගන්න. විස්තර කරන ලද ඇල්ගොරිතමය අනුව ටැබ් ක්රියාත්මක කරන්න.
