CSS மற்றும் JavaScript மூலம் தாவல்களை எவ்வாறு உருவாக்குவது என்பதை இந்த வழிகாட்டி விளக்குகிறது.
CSS மற்றும் JavaScript மூலம் டேப்களை உருவாக்குவது எப்படி?
CSS மற்றும் JavaScript உடன் தாவல்களை உருவாக்குவதற்கான படிப்படியான வழிமுறைகளை இந்தப் பிரிவு செயல்படுத்துகிறது.
படி 1: HTML ஐப் பயன்படுத்தி தாவல்களின் கட்டமைப்பை உருவாக்கவும்
முதலில், HTML தாவல்களின் கட்டமைப்பை உருவாக்கும் HTML குறியீட்டைப் பாருங்கள்:
< div ஐடி = 'tab1' கிளிக் செய்யவும் = 'முதல்()' > வீடு div >
< div ஐடி = 'tab2' கிளிக் செய்யவும் = 'இரண்டாவது();' > பற்றி div >
< div ஐடி = 'tab3' கிளிக் செய்யவும் = 'மூன்றாவது ();' > எங்களை தொடர்பு கொள்ள div >
< br />
< div ஐடி = 'cont1' > Linuxhint க்கு வரவேற்கிறோம் ! div >
< div ஐடி = 'cont2' > தொழில்நுட்பக் கல்வி
Linux, Programming, Computer Science மற்றும் பலவற்றைப் பற்றி அறிய உங்களுக்கு உதவ பல தயாரிப்புகளை நாங்கள் உருவாக்கியுள்ளோம்.
div >
< div ஐடி = 'cont3' >
எடிட்டர் AT linuxhint DOT com இல் எங்கள் குழுவை நீங்கள் தொடர்பு கொள்ளலாம்.
div >
மேலே உள்ள குறியீடு வரிகளில்:
- ' “டேப்1” ஐடி மற்றும் இணைக்கப்பட்ட “டிவ் உறுப்பைக் குறிச்சொல் சேர்க்கிறது கிளிக் செய்யவும் 'இணைக்கப்பட்டதை செயல்படுத்த நிகழ்வு' முதல்() 'செயல்பாடு கிளிக் செய்யும் போது. இந்த உறுப்பு ஒரு HTML தாவலாக செயல்படுகிறது.
- மேலே உள்ள முறை அடுத்த இரண்டு பிரிவு உறுப்புகளுக்கு செய்யப்படுகிறது.
- '
” டேக் ஒரு வரி முறிவை சேர்க்கிறது.- '
” குறிச்சொல் மீண்டும் “cont1” ஒதுக்கப்பட்ட ஐடியைக் கொண்ட ஒரு div உறுப்பைச் செருகும். இந்த உறுப்பு ஒரு தொகுதியில் உருவாக்கப்பட்ட தாவலின் உள்ளடக்கத்தைக் காட்டுகிறது.- அடுத்த இரண்டு'
” குறிச்சொற்கள் அவற்றின் ஒதுக்கப்பட்ட ஐடிகளுடன் div கூறுகளையும் சேர்க்கின்றன.
படி 2: CSS ஐப் பயன்படுத்தி நடை தாவல்கள்இப்போது, தாவல்களையும் அவற்றின் உள்ளடக்கங்களையும் உங்கள் விருப்பப்படி தனிப்பயனாக்க CSS ஸ்டைலிங் பண்புகளைப் பயன்படுத்தவும்:
< பாணி >
#tab1, #tab2, #tab3 {
மிதவை : விட்டு ;
திணிப்பு : 5px 10px 5px 10px ;
பின்னணி : ஆரஞ்சர் ;
நிறம் : #FFFFFF ;
விளிம்பு : 0px 5px 0px 5px ;
கர்சர் : சுட்டி ;
எல்லை - ஆரம் : 3px ;
}
#தாவல்1 : மிதவை, #தாவல்2 : மிதவை, #தாவல்3 : மிதவை {
பின்னணி : பச்சை ;
}
#cont1, #cont2, #cont3 {
அகலம் : 300px ;
உயரம் : 100px ;
திணிப்பு : 40px ;
எழுத்துரு - அளவு : நடுத்தர ;
எழுத்துரு - குடும்பம் : 'டைம்ஸ் நியூ ரோமன்' , டைம்ஸ், செரிஃப் ;
எல்லை : 2px திட ஆரஞ்சு ;
எல்லை - ஆரம் : 7px ;
காட்சி : எதுவும் இல்லை ;
}
பாணி >குறிப்பிடப்பட்ட குறியீடு துணுக்கில்:
- முதலில், அணுகவும் ' தாவல்கள் ” அவர்களுக்கு ஒதுக்கப்பட்ட ஐடிகளைப் பயன்படுத்தி, பின்வரும் பாணி பண்புகள் (ஃப்ளோட், பேடிங், பின்னணி, நிறம், விளிம்பு: 0px 5px 0px 5px, கர்சர் மற்றும் பார்டர்-ஆரம்) மூலம் அவற்றைத் தனிப்பயனாக்கவும்.
- அடுத்து, இணைக்கவும் ' மிதவை 'பயனர் சுட்டி அவற்றின் மீது வட்டமிடும்போது அவற்றின் பின்னணி வண்ணங்களை மாற்ற தாவல்களைக் கொண்ட நிகழ்வு ஹேண்ட்லர்.
- அதன் பிறகு, அணுகவும் ' தாவல்கள் உள்ளடக்கம் 'cont1', 'cont2' மற்றும் 'cont3' ஐடிகள் உள்ள div உறுப்புகளில் சேமிக்கப்படும். இப்போது, பின்வரும் பாணி பண்புகளை (அகலம், உயரம், திணிப்பு, எழுத்துரு அளவு, எழுத்துரு குடும்பம், எல்லை, எல்லை ஆரம் மற்றும் காட்சி) அவற்றைப் பயன்படுத்தவும்.
படி 3: ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி தாவல்களில் செயல்பாடுகளைச் சேர்க்கவும்கடைசியாக, ஜாவாஸ்கிரிப்ட் உதவியுடன் உருவாக்கப்பட்ட தாவல்களுக்கு செயல்பாடுகளைச் சேர்க்கவும்:
< கையால் எழுதப்பட்ட தாள் >
முதலில் செயல்பாடு ( ) {
ஆவணம். getElementById ( 'cont1' ) . பாணி . காட்சி = 'தடுப்பு' ;
ஆவணம். getElementById ( 'cont2' ) . பாணி . காட்சி = 'இல்லை' ;
ஆவணம். getElementById ( 'cont3' ) . பாணி . காட்சி = 'இல்லை' ;
}
செயல்பாடு இரண்டாவது ( ) {
ஆவணம். getElementById ( 'cont2' ) . பாணி . காட்சி = 'தடுப்பு' ;
ஆவணம். getElementById ( 'cont1' ) . பாணி . காட்சி = 'இல்லை' ;
ஆவணம். getElementById ( 'cont3' ) . பாணி . காட்சி = 'இல்லை' ;
}
செயல்பாடு மூன்றாவது ( ) {
ஆவணம். getElementById ( 'cont3' ) . பாணி . காட்சி = 'தடுப்பு' ;
ஆவணம். getElementById ( 'cont1' ) . பாணி . காட்சி = 'இல்லை' ;
ஆவணம். getElementById ( 'cont2' ) . பாணி . காட்சி = 'இல்லை'
}
கையால் எழுதப்பட்ட தாள் >மேலே உள்ள குறியீடு வரிகள்:
- ' என்றழைக்கப்படும் ஒரு செயல்பாட்டை வரையறுக்கவும் முதலில் ”.
- இந்த செயல்பாடு வரையறையில், ' document.getElementById() ”முறையானது “cont1” ஐடியாக இருக்கும் div உறுப்பை அணுகி “ஐப் பயன்படுத்துகிறது. பாணி 'ஒரு' கொண்ட சொத்து தொகுதி ”அதன் மீதான மதிப்பு. இந்த சொத்து பயனர் கிளிக் செய்யும் தாவலின் உள்ளடக்கத்தைக் காண்பிக்கும்.
- அடுத்து, 'document.getElementById()' மற்றொரு DIVஐ அணுகி, அதை மறைக்க 'இல்லை' மதிப்பைக் கொண்ட 'ஸ்டைல்' சொத்தை பயன்படுத்துகிறது. அது அந்த உறுப்பை வலைப்பக்கத்தில் மறைக்கும்.
- மேலே உள்ள முறை அடுத்த அணுகப்பட்ட div உறுப்புகளுக்கு செய்யப்படுகிறது. ஏனென்றால், 'முதல்' செயல்பாடு தாவலின் உள்ளடக்கத்தை மட்டுமே காண்பிக்கும், அதன் 'ஸ்டைல்' சொத்து மதிப்பு 'பிளாக்' மற்றும் மற்றவற்றை மறைக்கிறது.
- மேலே உள்ள செயல்முறை அடுத்த 'இரண்டாவது ()' மற்றும் 'மூன்றாவது ()' செயல்பாடுகளுக்கு செய்யப்படுகிறது.
வெளியீடு
தாவல்கள் வெற்றிகரமாக உருவாக்கப்பட்டு, பயனர் கிளிக்கில் அவற்றின் உள்ளடக்கத்தைக் காட்டுவதைக் காணலாம்.
முடிவுரை
தாவல்களை உருவாக்க முதலில் 'HTML' ஐப் பயன்படுத்தி அவற்றின் கட்டமைப்புகளை உருவாக்கவும், பின்னர் CSS ஸ்டைலிங் பண்புகளின் உதவியுடன் அவற்றைத் தனிப்பயனாக்கவும். எந்த கூடுதல் ஸ்டைல் ஷீட்டையும் ஏற்றுமதி செய்யாமல் ஸ்டைலிங் பண்புகள் சேர்க்கப்படுகின்றன. இந்த பண்புகள் தாவல்களை கவர்ச்சிகரமான மற்றும் கண்கவர் ஆக்குகின்றன. தாவல்கள் உருவாக்கப்பட்டு தனிப்பயனாக்கப்பட்டவுடன், அவற்றில் செயல்பாடுகளைச் சேர்க்க ஜாவாஸ்கிரிப்ட் நிரலாக்க மொழியைப் பயன்படுத்தவும். CSS மற்றும் JavaScript மூலம் தாவல்களை உருவாக்குவதற்கான முழுமையான செயல்முறையை இந்த வழிகாட்டி நடைமுறையில் விளக்கியுள்ளது.