W3.CSS Navigation Tabs
လန်ဒန်
လန်ဒန်သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။
၎င်းသည် ယူနိုက်တက်ကင်းဒမ်းတွင် လူဦးရေအများဆုံးမြို့ဖြစ်ပြီး မြို့ပြဧရိယာတွင် နေထိုင်သူ 9 သန်းကျော်ရှိသည်။
လမ်းကြောင်းပြခြင်းကို တဘ်လုပ်ထားသည်။
တဘ်ထည့်ထားသော လမ်းညွှန်ချက်သည် ဝဘ်ဆိုက်တစ်ခုအား သွားလာရန် နည်းလမ်းတစ်ခုဖြစ်သည်။
ပုံမှန်အားဖြင့်၊ တဘ်ထည့်ထားသော လမ်းညွှန်ချက်သည် ရွေးချယ်ထားသော တဘ်ကို မီးမောင်းထိုးပြထားသည့် လမ်းကြောင်းပြခလုတ်များ (တက်ဘ်များ) ကို အသုံးပြုသည်။
ဤဥပမာသည် တူညီသောအတန်းအမည် (ကျွန်ုပ်တို့၏ဥပမာရှိ "မြို့") ဖြင့် ဒြပ်စင်များကို အသုံးပြုကာ၊ display:none နှင့် display:block အကြား စတိုင်လ်ကို ပြောင်းလဲပြီး မတူညီသောအကြောင်းအရာများကို ပြသရန်-
ဥပမာ
<div id="London" class="city">
<h2>London</h2>
<p>London is the capital
of England.</p>
</div>
<div id="Paris" class="city" style="display:none">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div
id="Tokyo" class="city" style="display:none">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
တက်ဘ်လုပ်ထားသော အကြောင်းအရာကို ဖွင့်ရန် နှိပ်နိုင်သော ခလုတ်အချို့-
ဥပမာ
<div class="w3-bar w3-black">
<button class="w3-bar-item w3-button"
onclick="openCity('London')">London</button>
<button
class="w3-bar-item w3-button" onclick="openCity('Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity('Tokyo')">Tokyo</button>
</div>
အလုပ်လုပ်ဖို့ JavaScript တစ်ခု၊
ဥပမာ
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
JavaScript ကို ရှင်းပြထားပါတယ်။
သုံးစွဲသူသည် မီနူးရှိ ခလုတ်များထဲမှ တစ်ခုကို နှိပ်သည့်အခါ openCity() လုပ်ဆောင်ချက်ကို ခေါ်သည် ။
လုပ်ဆောင်ချက်သည် အတန်းအမည် "city" ( display="none" ) ဖြင့် ဒြပ်စင်အားလုံးကို ဝှက်ထားပြီး ပေးထားသော မြို့အမည် ( display="block" );
ပိတ်နိုင်သော တဘ်များ
လန်ဒန်
လန်ဒန်သည် အင်္ဂလန်နိုင်ငံ၏ မြို့တော်ဖြစ်သည်။
တက်ဘ်တစ်ခုကိုပိတ်ရန်၊ တက်ဘ်ကွန်တိန်နာအတွင်းရှိ အစိတ်အပိုင်း တစ်ခုသို့ onclick="this.parentElement.style.display='none'" ကို ထည့်ပါ။
ဥပမာ
<div id="London" class="w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button w3-display-topright">X</span>
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
အသုံးပြုနေသော/လက်ရှိ တဘ်
အသုံးပြုသူဖွင့်ထားသည့် လက်ရှိတက်ဘ်/စာမျက်နှာကို မီးမောင်းထိုးပြရန်၊ JavaScript ကိုအသုံးပြုပြီး အသုံးပြုနေသောလင့်ခ်တွင် အရောင်အတန်းတစ်ခုကို ထည့်ပါ။ အောက်ပါဥပမာတွင်၊ ကျွန်ုပ်တို့သည် လင့်တစ်ခုစီသို့ "tablink" အတန်းကို ပေါင်းထည့်ထားပါသည်။ ထိုနည်းအားဖြင့်၊ တက်ဘ်များနှင့် ဆက်စပ်နေသည့် လင့်ခ်များအားလုံးကို လွယ်ကူစွာ ရယူနိုင်ပြီး ၎င်းကို မီးမောင်းထိုးပြရန် လက်ရှိ တက်ဘ်လင့်ခ်ကို "w3-red" အတန်းအဖြစ် ပေးပါ။
ဥပမာ
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i =
0; i < x.length; i++) {
x[i].style.display
= "none";
}
tablinks =
document.getElementsByClassName("tablink");
for (i =
0; i < x.length; i++) {
tablinks[i].className =
tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display =
"block";
evt.currentTarget.className += "
w3-red";
}
ဒေါင်လိုက် တက်ဘ်များ
ဥပမာ
<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px">
<button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Paris')">Paris</button>
<button class="w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</nav>
Animated Tab အကြောင်းအရာ
တဘ်အကြောင်းအရာတွင် မှိန်ရန်၊ ဇမ်ချဲ့ရန် သို့မဟုတ် လျှောကျရန် w3-animate- အတန်းများကို အသုံးပြုပါ။
ဥပမာ
<div id="London" class="w3-container city w3-animate-left">
<p>London is the capital city of England.</p>
</div>
တဘ်လုပ်ထားသော ပုံပြခန်း
ပုံတစ်ပုံကိုနှိပ်ပါ-
ဥပမာ
<a href="#" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature">
</a>
<div id="Nature" class="picture w3-display-container">
<img
src="img_nature_wide.jpg" alt="Nature" style="width:100%">
<span onclick="this.parentElement.style.display='none'"
class="w3-display-topright">×</span>
<div
class="w3-display-bottomleft w3-container">Nature</div>
</div>
Grid တစ်ခုရှိ တက်ဘ်များ
တတိယကော်လံ အပြင်အဆင်တွင် တဘ်များကို အသုံးပြုခြင်း။ နောက်ခံအရောင်အစား တက်ကြွသောတက်ဘ်သို့ အောက်ခြေဘောင်တစ်ခုကို ထည့်ကြောင်း သတိပြုပါ-