jQuery tabs html: hiding and showing corresponding paragraphs -

मेरे पास निम्न HTML है:

  & lt; div class = "headings" & gt; & Lt; h1 वर्ग = "एक सीलिड" & gt; & lt; a href = "#" & gt; एक & lt; / a & gt; & lt; / h1 & gt; & Lt; h1 वर्ग = "दो" & gt; & lt; a href = "#" & gt; दो & lt; / a & gt; & lt; / h1 & gt; & Lt; h1 वर्ग = "तीन" & gt; & lt; a href "#" & gt; तीन & lt; / a & gt; & lt; / h1 & gt; & Lt; / div & gt; & Lt; div वर्ग = "पैराग्राफ" & gt; & Lt; p वर्ग = "एक" & gt; हैलो वन & lt; / p & gt; & Lt; p वर्ग = "दो" & gt; हैलो दो & lt; / p & gt; & Lt; p वर्ग = "तीन" & gt; हैलो थ्री & lt; / p & gt; & Lt; / div & gt;   
 (या ऐसा कुछ)। मैं इन उद्देश्यों को ध्यान में रखते हुए एक jQuery फ़ंक्शन सेट करना चाहता हूं:  
 
 जब दस्तावेज़ सभी शीर्ष पैराग्राफ को चयनित शीर्षक से संबंधित को छोड़ देता है, तो छिपा हुआ होता है। इस प्रकार शुरुआत में यह सब एक पैराग्राफ होगा, लेकिन मैं कोड को सामान्य मानना ​​चाहता हूं ताकि अगर मैं एक और शीर्षक और पैराग्राफ जोड़ूं तो मुझे कोई भी jQuery कोड नहीं बदलना होगा।   < p> 2 ए। फ़्यूडिंग शीर्षक पर क्लिक करने पर, "चयनित" क्लास सब पर लागू होता है, लेकिन फ्यू शीर्षक होता है, जिससे कि केवल शीर्षक foo में "चयनित" का एक वर्ग होता है, जिसके माध्यम से सीएसएस का उपयोग फू तत्व शैली के अनुसार किया जाता है।  
 2 बी। जब फू शीर्षक (नंबर दो कहते हैं) को क्लिक किया जाता है, तो केवल इसी पैराग्राफ दृश्यमान हो जाती है (इस मामले में पैराग्राफ दो)।  
 मुझे ऐसा कुछ चाहिए:  
  $ (document) )। (समारोह () {$ ("हेडिंग्स")। OnClick (फ़ंक्शन () {$ this.addClass ("selected"); अन्य ()। RemoveClass ("selected");} var selectionIndex = $ ( $ ("। पैराग्राफ्स")। (ChildAtIndex ("n")। )। दिखाएँ ();});   
 वांछित परिणाम को प्राप्त करने के तरीके पर अपने इनपुट के लिए धन्यवाद।   
 
 
 आप अनुशंसित अनुच्छेद लक्षित करने के लिए  h1 के  सूचकांक का उपयोग कर सकते हैं:  
  $ ('div.headings & gt; h1 '' पर क्लिक करें, फ़ंक्शन () {var $ this = $ (this), idx = $ this.index (); $ this.addClass ('selected')। भाई बहन ()। RemoveClass ('selected' ); $ ('Div.paragraphs & gt; p')। Eq (idx) .show ()। भाई बहन ()। छिपाना ();})। Eq (0) .click ();