CSS మరియు JavaScriptతో ట్యాబ్‌లను ఎలా సృష్టించాలో ఈ గైడ్ వివరిస్తుంది.
CSS మరియు జావాస్క్రిప్ట్‌తో ట్యాబ్‌లను ఎలా సృష్టించాలి?
ఈ విభాగం CSS మరియు JavaScriptతో ట్యాబ్‌ల సృష్టి కోసం దశల వారీ సూచనలను నిర్వహిస్తుంది.
దశ 1: HTMLని ఉపయోగించి ట్యాబ్‌ల నిర్మాణాన్ని సృష్టించండి
ముందుగా, HTML ట్యాబ్‌ల నిర్మాణాన్ని సృష్టించే HTML కోడ్‌ను చూడండి:
< div id = 'టాబ్ 1' క్లిక్ చేయండి = 'ప్రధమ()' > హోమ్ div >
< div id = 'tab2' క్లిక్ చేయండి = 'రెండవ();' > గురించి div >
< div id = 'టాబ్ 3' క్లిక్ చేయండి = 'మూడవ ();' > మమ్మల్ని సంప్రదించండి div >
< br />
< div id = 'cont1' > Linuxhintకి స్వాగతం ! div >
< div id = 'cont2' > సాంకేతిక విద్య
మేము Linux, ప్రోగ్రామింగ్, కంప్యూటర్ సైన్స్ మరియు మరిన్నింటి గురించి తెలుసుకోవడానికి మీకు సహాయం చేయడానికి అనేక ఉత్పత్తులను రూపొందించాము.
div >
< div id = 'cont3' >
మీరు ఎడిటర్ AT linuxhint DOT comలో మా బృందాన్ని సంప్రదించవచ్చు.
div >
పై కోడ్ లైన్లలో:
- ది ' ”ట్యాగ్ ఒక id “tab1” మరియు జోడించిన “తో DIV మూలకాన్ని జోడిస్తుంది క్లిక్ చేయండి 'లింక్ చేయబడిన వాటిని అమలు చేయడానికి ఈవెంట్' ప్రధమ() 'అది క్లిక్ చేసినప్పుడు ఫంక్షన్. ఈ మూలకం HTML ట్యాబ్‌గా పనిచేస్తుంది.
- పై పద్ధతి తదుపరి రెండు div మూలకాల కోసం నిర్వహించబడుతుంది.
- ది '
” ట్యాగ్ లైన్ బ్రేక్‌ని జోడిస్తుంది.- ది '
”ట్యాగ్ మళ్లీ కేటాయించిన id “cont1”ని కలిగి ఉన్న DIV మూలకాన్ని చొప్పిస్తుంది. ఈ మూలకం బ్లాక్‌లో సృష్టించబడిన ట్యాబ్ యొక్క కంటెంట్‌ను చూపుతుంది.- తదుపరి రెండు '
”ట్యాగ్‌లు వాటికి కేటాయించిన ఐడిలతో డివి ఎలిమెంట్‌లను కూడా జోడిస్తాయి.
దశ 2: CSSని ఉపయోగించి స్టైల్ ట్యాబ్లుఇప్పుడు, మీ ఎంపిక ప్రకారం ట్యాబ్‌లు మరియు వాటి కంటెంట్‌లను అనుకూలీకరించడానికి CSS స్టైలింగ్ లక్షణాలను వర్తింపజేయండి:
< శైలి >
#tab1, #tab2, #tab3 {
తేలుతుంది : వదిలేశారు ;
పాడింగ్ : 5px 10px 5px 10px ;
నేపథ్య : నారింజరు ;
రంగు : #FFFFFF ;
మార్జిన్ : 0px 5px 0px 5px ;
కర్సర్ : పాయింటర్ ;
సరిహద్దు - వ్యాసార్థం : 3px ;
}
#టాబ్1 : హోవర్, #tab2 : హోవర్, #tab3 : హోవర్ {
నేపథ్య : ఆకుపచ్చ ;
}
#cont1, #cont2, #cont3 {
వెడల్పు : 300px ;
ఎత్తు : 100px ;
పాడింగ్ : 40px ;
ఫాంట్ - పరిమాణం : మధ్యస్థ ;
ఫాంట్ - కుటుంబం : 'టైమ్స్ న్యూ రోమన్' , టైమ్స్, సెరిఫ్ ;
సరిహద్దు : 2px ఘన నారింజ రంగు ;
సరిహద్దు - వ్యాసార్థం : 7px ;
ప్రదర్శన : ఏదీ లేదు ;
}
శైలి >పేర్కొన్న కోడ్ స్నిప్పెట్‌లో:
- ముందుగా, 'ని యాక్సెస్ చేయండి ట్యాబ్‌లు ” వారి కేటాయించిన idలను ఉపయోగించి మరియు క్రింది స్టైల్ ప్రాపర్టీల ద్వారా వాటిని అనుకూలీకరించండి (ఫ్లోట్, ప్యాడింగ్, బ్యాక్‌గ్రౌండ్, కలర్, మార్జిన్: 0px 5px 0px 5px, కర్సర్ మరియు సరిహద్దు-వ్యాసార్థం).
- తరువాత, “ని అటాచ్ చేయండి హోవర్ ” యూజర్ మౌస్ వాటిపై హోవర్ చేసినప్పుడు వాటి నేపథ్య రంగులను మార్చడానికి ట్యాబ్‌లతో ఈవెంట్ హ్యాండ్లర్.
- ఆ తర్వాత, యాక్సెస్ చేయండి ' ట్యాబ్‌ల కంటెంట్ 'cont1', 'cont2' మరియు 'cont3' అనే idలు ఉన్న div మూలకాలలో నిల్వ చేయబడుతుంది. ఇప్పుడు, కింది స్టైల్ ప్రాపర్టీలను (వెడల్పు, ఎత్తు, పాడింగ్, ఫాంట్ పరిమాణం, ఫాంట్ కుటుంబం, సరిహద్దు, సరిహద్దు వ్యాసార్థం మరియు ప్రదర్శన) వర్తించండి.
దశ 3: జావాస్క్రిప్ట్‌ని ఉపయోగించి ట్యాబ్‌లకు కార్యాచరణలను జోడించండిచివరగా, JavaScript సహాయంతో సృష్టించిన ట్యాబ్‌లకు కార్యాచరణలను జోడించండి:
< స్క్రిప్ట్ >
మొదటి ఫంక్షన్ ( ) {
పత్రం. 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 మూలకాల కోసం పై పద్ధతి అమలు చేయబడుతుంది. ఎందుకంటే 'మొదటి' ఫంక్షన్ ట్యాబ్ యొక్క కంటెంట్‌ను మాత్రమే ప్రదర్శిస్తుంది, దీని 'స్టైల్' ప్రాపర్టీ విలువ 'బ్లాక్' మరియు ఇతరులను దాచిపెడుతుంది.
- పై విధానం తదుపరి “సెకండ్()” మరియు “థర్డ్()” ఫంక్షన్‌ల కోసం నిర్వహించబడుతుంది.
అవుట్‌పుట్
ట్యాబ్‌లు విజయవంతంగా సృష్టించబడినట్లు మరియు వినియోగదారు క్లిక్‌లో వాటి సంబంధిత కంటెంట్‌ను చూపడం చూడవచ్చు.
ముగింపు
ట్యాబ్‌లను సృష్టించడానికి ముందుగా 'HTML'ని ఉపయోగించి వాటి నిర్మాణాలను రూపొందించండి, ఆపై CSS స్టైలింగ్ లక్షణాల సహాయంతో వాటిని అనుకూలీకరించండి. ఎలాంటి అదనపు స్టైల్ షీట్‌ను ఎగుమతి చేయకుండా స్టైలింగ్ లక్షణాలు జోడించబడతాయి. ఈ లక్షణాలు ట్యాబ్‌లను ఆకర్షణీయంగా మరియు ఆకర్షించేలా చేస్తాయి. ట్యాబ్‌లు సృష్టించబడి మరియు అనుకూలీకరించబడిన తర్వాత, వాటికి కార్యాచరణలను జోడించడానికి జావాస్క్రిప్ట్ ప్రోగ్రామింగ్ భాషను ఉపయోగించండి. ఈ గైడ్ CSS మరియు JavaScriptతో ట్యాబ్‌లను సృష్టించే పూర్తి విధానాన్ని ఆచరణాత్మకంగా వివరించింది.