Jquery UI के बिना एक साधारण टैब सिस्टम कैसे बनाएं

मैं एक साधारण टैब सिस्टम बनाने की कोशिश कर रहा हूं .. लेकिन कोड केवल पहले क्लिक के लिए काम करता है और फिर प्रत्युत्तर देना बंद कर देता है।

मैं jQuery UI के साथ नहीं जाना चाहता था, क्योंकि फ़ाइल का आकार अपेक्षाकृत भारी है।

$("#container1").hide();


if ($("#container1").is(":visible")) {
    $("#link1").click(function() {
        $("#container1").hide();
        $("#container2").show();
    });
};

if ($("#container2").is(":visible")) {
    $("#link2").click(function() {
        $("#container1").show();
        $("#container2").hide();
    });
};

यह मेरे जैसे एक नौसिखिया के लिए सही है, क्या कोई मुझे बता सकता है कि मैं गलत कहां जा रहा हूं?

here is a fiddle

धन्यवाद

0
स्पोकी, यह आश्चर्यजनक है!
जोड़ा लेखक user2950370, स्रोत
मुझे पता है कि आप चीजों को सरल रखना चाहते हैं, यह सिर्फ तभी होता है जब आप अधिक टैब जोड़ना चाहते हैं (इस तरह आपको कोड एन बार कॉपी करने की आवश्यकता नहीं होगी) jsfiddle.net/S8h5v/2
जोड़ा लेखक Spokey, स्रोत

2 उत्तर

यहां प्रारंभिक समस्या यह है कि कंटेनर दिखाई देने पर आप केवल क्लिक ईवेंट को बाध्य कर रहे हैं। आप घटना को बांधना चाहते हैं और कॉलबैक के अंदर राज्य की जांच करना चाहते हैं।

$("#container1").hide();


$("#link1").click(function() {
    if ($("#container1").is(":visible")) {
        $("#container1").hide();
        $("#container2").show();
    };
});

$("#link2").click(function() {
    if ($("#container2").is(":visible")) {
        $("#container1").show();
        $("#container2").hide();
    };    
});

http://jsfiddle.net/S8h5v/1/

इस बारे में बात करने के लायक है कि यह क्यों हो रहा है और आप एक अलग परिणाम की उम्मीद क्यों कर रहे थे। ऐसा करने के लिए हमें प्रत्येक उदाहरण के लिए निष्पादन स्टैक के माध्यम से चलना चाहिए:

hide the container1 element
check if container1 is visible (it isn't) and if so:
  add a callback to the click event of link1 element
check if container2 is visible (it is) and if so:
  add a callback to the click event of link2 element
user clicks link2
  callback registered to link2 click is fired
    show container1
    hide container2

अब आप देख सकते हैं कि उपयोगकर्ता लिंक 1 पर क्लिक करता है, भले ही कॉलबैक कभी पंजीकृत न हो।

इस समस्या के करीब आने का थोड़ा और बेवकूफ तरीका है जो एक jQuery प्लगइन बनाना है, कुछ निम्न जैसा है:

// http://jsfiddle.net/S8h5v/5/

// js:

$.fn.tabSample = function(){
    $(this).each(function(idx, el){
        var $this = $(this);
        $this.delegate('.tabs div', 'click', function(event){
            var index = $this.find(".tabs div").index(event.target);
            $this.find(".contents div").removeClass('active');
            var item = $this.find(".contents div:eq(" + index + ")").addClass('active');
            console.log(item, index);
        });
        $this.find('.contents div:eq(0)').addClass('active');
    });
};

// html

<div class="tab-control">
  <div class="tabs">
    <div>Link 1</div>
    <div>Link 2</div>
  </div>
  <div class="contents">
    <div>container 1</div>
    <div>container 2</div>
  </div>
</div>

// css

.tab-control .tabs div {
  display: inline-block;
  cursor:pointer;
  padding:10px 30px;
  background-color:blue;
  border: solid 1px lightblue;
}
.tab-control .contents div {
    display: none;
    width:100%;
    height:100px;
    background-color:red;
}
.tab-control .contents div.active {
    display: inline-block;
}

इस दृष्टिकोण को आजमाने का कारण यह है कि यह आपके कोड की लचीलापन बढ़ाता है। उदाहरण के लिए नई सामग्री आइटम जोड़ने के लिए आप टैब तत्व में एक नया div जोड़ सकते हैं और सामग्री तत्व में एक नया div जोड़ सकते हैं, फिर वे टैबबिंग का समर्थन करने के लिए स्वचालित रूप से वायरस हो जाएंगे। आप निष्क्रिय सीएसएस परिभाषा को बढ़ाकर "दिखा रहा है" और "छिपाने" के तरीके को भी बदल सकते हैं ताकि अधिक आधुनिक ब्राउज़र में आप सीएसएस 3 संक्रमण और एनिमेशन का उपयोग कर सकें। इसके अलावा यह आपके कोड को पोर्टेबल होने की अनुमति देता है, इसलिए यदि आपके पास एक ही पृष्ठ पर एकाधिक टैब नियंत्रण हैं तो आप टकराव में भाग दिए बिना उन्हें बना सकते हैं:

$(".first-tabset").tabSample();
$(".second-tabset").tabSample();
// any elements within these sets will not affect the other.
0
जोड़ा
धन्यवाद! यह मुझे समुद्री मील में था!
जोड़ा लेखक user2950370, स्रोत

http://jsfiddle.net/BJ8vZ/ solution without jquery, and keyboard arrow keys activated


<div id="tabs">
    tab 1
    tab 2
    tab 3
</div>
<div id="tabs_data">
    
contents of tab 1
contents of tab 2
contents of tab 3
</div> <script> var tabActive=1, tabs=document.getElementById('tabs').getElementsByTagName('A'), tabs_data=document.getElementById('tabs_data').getElementsByTagName('fieldset'); function tab_click(x){ if(x > -1 && x < tabs.length && x < tabs_data.length){ tabs[tabActive].setAttribute('class',''); tabs_data[tabActive].style.display='none'; tabActive=x; tabs[tabActive].setAttribute('class','active'); tabs_data[tabActive].style.display='block'; } return false; }tab_click(0); document.onkeydown=function (evnt){ if(evnt.keyCode==37 || evnt.keyCode==39) tab_click(tabActive+evnt.keyCode-38); } </script>
0
जोड़ा
मुझे यह पसंद है - सरल और वास्तविक सादा जेएस। हालांकि, सेट एट्रिब्यूट 'क्लास' आईई में अच्छी तरह से काम नहीं करता है। इसके बजाय मुझे टैब [टैबएक्टिव] का उपयोग करना पड़ा .className = 'active';
जोड़ा लेखक Matt, स्रोत