Create a Tab In HTML, HTML Tabs Example With Code In Hindi

Create a Tab In HTML का ये आर्टिकल बेहद खास है इसे end तक पढ़े.

दोस्तों अगर आपकी कोई website है या फिर आप कोई website बना रहे है तो आप यही चाहोगे की मेरी website का कंटेंट सही दिखे और कंटेंट की डिजाईन भी सुन्दर हो तो इसके लिए आपको अलग-अलग तरीके अपनाने पड़ते है और उन तरीको में से एक है HTML tabs, आज आप सीखोगे Create a Tab In HTML, HTML Tabs Example With Code In Hindi, HTML for tab.

Create a Tab In HTML के इस आर्टिकल में आप आगे पढोगे की HTML tabs क्या होता है, HTML tabs का क्या उपयोग है, HTML tabs का use हम कहाँ करें, HTML tabs का use केसे करें, आदि

साथ में आपको Create a Tab In HTML के इस आर्टिकल के डेमो का कोड भी मिल जायेगा जिससे आपको समझने में आसानी होगी |

What is Tab In HTML (Create a Tab In HTML)

दोस्तों HTML tabs काफी महत्वपूर्ण बन जाता है जब आपकी कोई website है या बना रहे है तो, website चाहे छोटी हो या बड़ी HTML tabs का रोल खास होता है और इसी कारण आपको HTML tabs का पूरा knowledge होना चाहिए |

आइये पढ़ते है What is Tabs In HTML

दोस्तों tabs एक HTML framework है जिसका उपयोग लिमिटेड जगह के अंदर ज्यादा सामग्री (content) रखने के लिए किया जाता है |

अगर इससे भी आसान शब्दों में कहूँ तो HTML tabs वो साधन है जो कम time में ज्यादा दुरी तय करता है |
उम्मीद है दोस्तों इस उदहारण से आप समझ गये होंगे की HTML tabs क्या होते है, और आगे हम बात करें की HTML tabs का क्या use है |

What is the tabs used for in HTML?(Create a Tab In HTML)

(What is the tabs used for in HTML?) इस लाइन का मतलब है की HTML में tabs का क्या उपयोग है ?

HTML में tabs का काफी उपयोग है जेसे की आपकी वेबसाइट बड़ी है और जाहिर है की बड़ी website में content भी ज्यादा होगा तो इस condition में आप tabs का सहारा ले सकते है अपने कंटेंट को सही ढंग से दिखाने के लिए या manage करने के लिए |

Create a Tab In HTML के इस आर्टिकल पर आपको में सभी सवालों के जवाब देने वाला हूँ उदहारण सहित जिससे कोई भी जानकारी आपसे छुटे ना |

what is the tabs used for in HTML ? (Create a Tab In HTML) – इस प्रश्न का उत्तर हम उदहारण सही समझते है | इसके लिए आपको दिए गये लिंक पर जाना है – Html Tabs Demo

दोस्तों जब आप इस लिंक पर क्लिक करेंगे तो आप एक वेबसाइट के product पर पहूँच जायेंगे और product पर जाने के बाद आपको scroll करना है और आपको tabs नजर आ जायेंगे कुछ इस टाइप से –

Create a Tab In Html

दोस्तों इन tabs को देखिये इसमें product की पूरी details दी गयी है एकदम कम space में और product से related content भी काफी है |

इस उदहारण से हम बड़ी आसानी से समझ सकते है की HTML में tabs की क्या भूमिका है | इसके साथ आपको बोनस में एक और point clear कर देता हूँ की HTML tabs और HTML accordion और HTML FAQ इन सबको add करना लगभग एक तरह ही है jQuery में थोडा difference हो सकता है |

Where to use tabs

वेसे तो tabs को हम कहीं भी add कर सकते है, ये अनिवार्य नहीं है की आप कोई निश्चित जगह पर ही add करें | लेकिन मेरा मानना है की tabs को उसी जगह पर add करें जहाँ tabs suitable हो | आसान भाषा में कहें तो tabs का use हमें उसी जगह करना चाहिए जहाँ कम space में ज्यादा content दिखाना हो |

How To Create a Tab In HTML

दोस्तों अब बात करें की आखिर HTML tabs को हम add कैसे करें अपनी website में तो इसके लिए simple से काम करने होंगे आपको –
1 – HTML document ready करना होगा
2 – HTML document की CSS करनी होगी
3 – jQuery की library add करनी होगी
4 – jQuery का कोड लिखना होगा

HTML For Tab

दोस्तों इन 4 step को follow करके आप यूनिक HTML tabs create(HTML for tab) कर सकते है | आइये अब चलते है अपने कोड की तरफ, दोस्तों सबसे पहले आपको HTML tabs का फोर्मेट तेयार करना होगा कुछ इस प्रकार से

  <div class="tabs">
  <ul id="tabs-nav">
    <li><a href="#tab1">Tab-1</a></li>
    <li><a href="#tab2">Tab-2</a></li>
    <li><a href="#tab3">Tab-3</a></li>
    <li><a href="#tab4">Tab-4</a></li>
  </ul>
  <div id="tabs-content">
    <div id="tab1" class="tab-content">
      add your content in tab-1
    </div>
    <div id="tab2" class="tab-content">
      add your content in tab-2
    </div>
    <div id="tab3" class="tab-content">
      add your content in tab-3
    </div>
    <div id="tab4" class="tab-content">
      add your content in tab-4
    </div>
  </div>
</div> 

अब आपको करनी है CSS कुछ इस प्रकार से

<style>
    .tabs {
      width: 600px;
      background-color: #dadada;
      border-radius: 5px 5px 5px 5px;
      margin: auto;
    }
    ul#tabs-nav {
      list-style: none;
      margin: 0;
      padding: 5px;
      overflow: auto;
    }
    ul#tabs-nav li {
      float: left;
      font-weight: bold;
      margin-right: 2px;
      padding: 8px 10px;
      border-radius: 5px 5px 5px 5px;
      cursor: pointer;
    }
    ul#tabs-nav li:hover,
    ul#tabs-nav li.active {
      background-color: rgba(0,0,0,.7);
    }
    #tabs-nav li a {
      text-decoration: none;
      color: #000;
    }
    ul#tabs-nav li.active a,ul#tabs-nav li:hover a{
      color: #fff;
    }
    .tab-content {
      padding: 10px;
      box-shadow: 2px 19px 20px -4px #ccc;
      background-color: #FFF;
    }
    html {
      margin: 0;
      padding: 0;
    }
    body { 
      text-align: center;
      font-family: sans-serif;
      max-width: 60%;
      margin: auto;
      margin-top: 50px;
    }
  </style>

Create a Tab In HTML में अब आपको jQuery की library add करनी होगी body tag close होने से पहले कुछ इस प्रकार से –

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

अब आपको लिखनी होगी Create a Tab In HTML की script कुछ इस प्रकार से

<script type="text/javascript">
  // Show the first tab and hide the rest
  $('#tabs-nav li:first-child').addClass('active');
  $('.tab-content').hide();
  $('.tab-content:first').show();

  // Click function
  $('#tabs-nav li').click(function(){
    $('#tabs-nav li').removeClass('active');
    $(this).addClass('active');
    $('.tab-content').hide();
    
    var activeTab = $(this).find('a').attr('href');
    $(activeTab).slideDown(600);
    return false;
});
</script>

दोस्तों इसका full demo कोड देखनें के लिए आप jsFiddle पर चेक कर सकते हैं जहाँ पर मैंने एक डेमो बनाया है और अगर आप Create a Tab In HTML के इतने step follow करते हैं तो आपको फाइनल look कुछ इस प्रकार दिखाई देगा |

Bonus Tip – दोस्तों HTML में tab बनानें के लिए हमें काफी कोडिंग करनें की जरूरत होती है लेकिन अगर आप WordPress use करते हैं या फिर आपकी WordPress में website है तो आपको tabs के लिए कोडिंग करनें की जरूरत नहीं है |

WordPress में पेज बिल्डर की सहायता से आप tabs बना सकते हैं अपनीं सुविधा अनुसार आसानीं से, अगर आपको WordPress में tabs बनाना सीखना है तो आप मुझे comment कर सकते हैं मैं जल्द ही इस पर एक और आर्टिकल लिखनें की कोशिस करूँगा |

Q – HTML tabs क्या है ?

A – HTML tabs वह साधन है जिसके इस्तेमाल से webpage के content को व्यवस्थित किया जा सकता है जैसे – folder file, product description आदि |

Q – HTML tab के फायदे ?

A – HTML tabs का उपयोग एक fix जगह पर अधिक content शामिल करनें के लिए किया जाता है इसी कारण tab का उपयोग किया जाता है |
tabs का उपयोग e-commerce website और non-eCommerce website दोनें में किया जा सकता है |

HTML For Tab Conclusion

उम्मीद है दोस्तों Create a Tab In HTML का आर्टिकल आपको helpful लगा होगा और अगर helpful लगा है तो HTML For Tab के इस आर्टिकल को अपनें दोस्तों के साथ share जरुर करें |

इसी तरह के और आर्टिकल पढनें के लिए आप मेरी वेबसाइट webtutorialhindi को follow जरुर करें |

ताज़ा अपडेट पानें के लिए आप मेरे social media से जुड़ सकते हैं |

धन्यवाद

Leave a Comment