سی ایس ایس اور جاوا اسکرپٹ کے ساتھ ٹیبز کیسے بنائیں؟

ایچ ٹی ایم ایل ' ٹیبز ” وہ بلاکس ہیں جو کسی ویب سائٹ کے مواد کو ٹکڑوں میں محفوظ کرتے ہیں۔ یہ متعدد طریقوں جیسے ماؤس کلک، ڈبل کلک، ہوور، اور بہت کچھ استعمال کرتے ہوئے ذخیرہ شدہ مواد کو ظاہر کرنے کے لیے استعمال ہوتے ہیں۔ ٹیبز ویب سائٹ کے مختلف ویب صفحات پر تشریف لے جانے کا آسان ترین طریقہ فراہم کرتے ہیں۔ اس کے علاوہ، وہ جگہ کا انتظام کرنے اور ویب سائٹ کو مزید پرکشش اور دلکش بنانے میں بھی مدد کرتے ہیں۔

یہ گائیڈ وضاحت کرے گا کہ سی ایس ایس اور جاوا اسکرپٹ کے ساتھ ٹیبز کیسے بنائیں۔

سی ایس ایس اور جاوا اسکرپٹ کے ساتھ ٹیبز کیسے بنائیں؟

یہ سیکشن CSS اور JavaScript کے ساتھ ٹیبز بنانے کے لیے مرحلہ وار ہدایات دیتا ہے۔

مرحلہ 1: HTML کا استعمال کرتے ہوئے ٹیبز کا ڈھانچہ بنائیں

پہلے، ایچ ٹی ایم ایل کوڈ کو دیکھیں جو ایچ ٹی ایم ایل ٹیبز کا ڈھانچہ بناتا ہے:

< div id = 'ٹیب 1' کلک پر = 'پہلا()' > گھر div >

< div id = 'ٹیب 2' کلک پر = 'دوسرا ()؛' > کے بارے میں div >

< div id = 'tab3' کلک پر = 'تیسرے()؛' > ہم سے رابطہ کریں۔ div >

< بی آر />

< div id = 'cont1' > Linuxhint میں خوش آمدید ! div >

< div id = 'cont2' > ٹکنالوجی ایجوکیشن

ہم نے آپ کو لینکس، پروگرامنگ، کمپیوٹر سائنس، اور مزید کے بارے میں جاننے میں مدد کے لیے بہت سے پروڈکٹس بنائے ہیں۔

div >

< div id = 'cont3' >

آپ ہماری ٹیم سے ایڈیٹر AT linuxhint DOT com پر رابطہ کر سکتے ہیں۔

div >

مندرجہ بالا کوڈ لائنوں میں:

'
” ٹیگ ایک id کے ساتھ ایک div عنصر کا اضافہ کرتا ہے “tab1” اور ایک منسلک “ کلک پر 'منسلک کو انجام دینے کا واقعہ' پہلا() جب اس پر کلک کیا جاتا ہے تو فنکشن۔ یہ عنصر HTML ٹیب کے طور پر کام کرتا ہے۔
مندرجہ بالا طریقہ اگلے دو div عناصر کے لئے انجام دیا جاتا ہے.
'
” ٹیگ لائن بریک کا اضافہ کرتا ہے۔
'
ٹیگ دوبارہ ایک div عنصر داخل کرتا ہے جس میں تفویض کردہ id 'cont1' ہوتا ہے۔ یہ عنصر بلاک میں بنائے گئے ٹیب کا مواد دکھاتا ہے۔
اگلے دو '
” ٹیگز اپنی تفویض کردہ آئی ڈی کے ساتھ div عناصر کو بھی شامل کرتے ہیں۔

مرحلہ 2: سی ایس ایس کا استعمال کرتے ہوئے اسٹائل ٹیبز

اب، اپنی پسند کے مطابق ٹیبز اور ان کے مواد کو اپنی مرضی کے مطابق بنانے کے لیے CSS اسٹائل کی خصوصیات کا اطلاق کریں:

< انداز >

#tab1، #tab2، #tab3 {

تیرنا : بائیں ;

بھرتی : 5px 10px 5px 10px ;

پس منظر : نارنجی ;

رنگ : #FFFFFF ;

مارجن : 0px 5px 0px 5px ;

کرسر : پوائنٹر ;

سرحد - رداس : 3px ;

}

#tab1 : ہوور، #tab2 : ہوور، #tab3 : ہوور {

پس منظر : سبز ;

}

#cont1، #cont2، #cont3 {

چوڑائی : 300px ;

اونچائی : 100px ;

بھرتی : 40px ;

فونٹ - سائز : درمیانہ ;

فونٹ - خاندان : 'ٹائمز نیو رومن' ، ٹائمز، سیرف ;

سرحد : 2px ٹھوس نارنجی ;

سرحد - رداس : 7px ;

ڈسپلے : کوئی نہیں ;

}

انداز >

بیان کردہ کوڈ کے ٹکڑوں میں:

سب سے پہلے، تک رسائی حاصل کریں ' ٹیبز ان کی تفویض کردہ آئی ڈیز کا استعمال کرتے ہوئے اور انہیں درج ذیل طرز کی خصوصیات (فلوٹ، پیڈنگ، پس منظر، رنگ، مارجن: 0px 5px 0px 5px، کرسر، اور سرحدی رداس) کے ذریعے اپنی مرضی کے مطابق بنائیں۔
اگلا، منسلک کریں ' ہوور ٹیبز کے ساتھ ایونٹ ہینڈلر جب صارف کا ماؤس ان پر منڈلاتا ہے تو ان کے پس منظر کے رنگ تبدیل کرنے کے لیے۔
اس کے بعد، تک رسائی حاصل کریں ' ٹیبز کا مواد ' div عناصر میں ذخیرہ کیا جاتا ہے جن کی ids 'cont1'، 'cont2' اور 'cont3' ہیں۔ اب، ان پر درج ذیل طرز کی خصوصیات (چوڑائی، اونچائی، پیڈنگ، فونٹ سائز، فونٹ فیملی، بارڈر، بارڈر ریڈیئس، اور ڈسپلے) لگائیں۔

مرحلہ 3: جاوا اسکرپٹ کا استعمال کرتے ہوئے ٹیبز میں افعال شامل کریں۔

آخر میں، جاوا اسکرپٹ کی مدد سے بنائے گئے ٹیبز میں فنکشنلٹیز شامل کریں:

< سکرپٹ >

سب سے پہلے فنکشن ( ) {

دستاویز getElementById ( 'cont1' ) . انداز . ڈسپلے = 'بلاک' ;

دستاویز getElementById ( 'cont2' ) . انداز . ڈسپلے = 'کوئی نہیں' ;

دستاویز getElementById ( 'cont3' ) . انداز . ڈسپلے = 'کوئی نہیں' ;

}

فنکشن سیکنڈ ( ) {

دستاویز getElementById ( 'cont2' ) . انداز . ڈسپلے = 'بلاک' ;

دستاویز getElementById ( 'cont1' ) . انداز . ڈسپلے = 'کوئی نہیں' ;

دستاویز getElementById ( 'cont3' ) . انداز . ڈسپلے = 'کوئی نہیں' ;

}

فنکشن تیسرا ( ) {

دستاویز getElementById ( 'cont3' ) . انداز . ڈسپلے = 'بلاک' ;

دستاویز getElementById ( 'cont1' ) . انداز . ڈسپلے = 'کوئی نہیں' ;

دستاویز getElementById ( 'cont2' ) . انداز . ڈسپلے = 'کوئی نہیں'

}

سکرپٹ >

کوڈ کی اوپر کی لائنیں:

ایک فنکشن کی وضاحت کریں جس کا نام ' پہلا '
اس فنکشن کی تعریف میں، ' document.getElementById() ' طریقہ div عنصر تک رسائی حاصل کرتا ہے جس کی id 'cont1' ہے اور 'کا اطلاق ہوتا ہے انداز 'ایک کے ساتھ جائیداد' بلاک 'اس پر قدر. یہ پراپرٹی اس ٹیب کا مواد دکھائے گی جس پر صارف کلک کرتا ہے۔
اس کے بعد، 'document.getElementById()' دوسرے div تک رسائی حاصل کرتا ہے اور اسے چھپانے کے لیے 'کوئی نہیں' ویلیو والی 'سٹائل' پراپرٹی کا اطلاق کرتا ہے۔ یہ ویب صفحہ پر اس عنصر کو چھپائے گا۔
مندرجہ بالا طریقہ اگلے رسائی والے div عناصر کے لیے انجام دیا جاتا ہے۔ اس کی وجہ یہ ہے کہ 'پہلا' فنکشن صرف ٹیب کا مواد دکھاتا ہے جس کی 'اسٹائل' پراپرٹی ویلیو 'بلاک' ہے اور دوسروں کو چھپا دیتی ہے۔
مندرجہ بالا طریقہ کار اگلے 'سیکنڈ()' اور 'تھرڈ()' فنکشنز کے لیے انجام دیا جاتا ہے۔

آؤٹ پٹ

یہ دیکھا جا سکتا ہے کہ ٹیبز کامیابی کے ساتھ بنائے گئے ہیں اور صارف کے کلک پر اپنا متعلقہ مواد دکھاتے ہیں۔

نتیجہ

ٹیبز بنانے کے لیے پہلے 'HTML' کا استعمال کرتے ہوئے ان کے ڈھانچے بنائیں، اور پھر CSS اسٹائلنگ خصوصیات کی مدد سے انہیں اپنی مرضی کے مطابق بنائیں۔ اسٹائل کی خصوصیات بغیر کسی اضافی اسٹائل شیٹ کو برآمد کیے شامل کی جاتی ہیں۔ یہ خصوصیات ٹیبز کو پرکشش اور دلکش بناتی ہیں۔ ایک بار جب ٹیبز بن جائیں اور اپنی مرضی کے مطابق ہو جائیں، تو جاوا اسکرپٹ پروگرامنگ لینگویج کو ان میں فنکشنلٹیز شامل کرنے کے لیے استعمال کریں۔ اس گائیڈ میں CSS اور JavaScript کے ساتھ ٹیبز بنانے کے مکمل طریقہ کار کی عملی طور پر وضاحت کی گئی ہے۔

سی ایس ایس اور جاوا اسکرپٹ کے ساتھ ٹیبز کیسے بنائیں؟