टैब नेविगेशन - याद रखें उपयोगकर्ता चयन

Question

मैं अपने उपपृष्ठ उत्पाद के लिए एक टैब नेविगेशन का उपयोग कर रहा ->?p=products (नीचे दिए गए कोड को देखते हैं, वेबसाइट HTML और PHP के साथ महसूस किया है)

समस्या:

उपयोगकर्ता क्लिक करता है, उदाहरण के लिए, दूसरे टैब में लिंक विवरण। फिर वह बैक बटन का उपयोग करता है। अब वह उत्पाद साइट पर वापस आ गया है, लेकिन पहले टैब में नहीं, बल्कि पहले में।

मैं अंतिम बार इस्तेमाल किया गया टैब याद रखना चाहता हूं (यहां: href="#section-2"), यदि उपयोगकर्ता उत्पाद पृष्ठ पर वापस जाता है।

क्या किसी को पता है कि मैं इसे कैसे महसूस कर सकता हूं?

<div id="tabs" class="tabs"> 
    <nav> 
     <ul> 
      <li><a href="#section-1" class="icon-cross"><span>Product 1</span></a></li> 
      <li><a href="#section-2" class="icon-cross"><span>Product 2</span></a></li> 
      <li><a href="#section-3" class="icon-cross"><span>Product 3</span></a></li> 
      <li><a href="#section-4" class="icon-cross"><span>Product 4</span></a></li> 
     </ul> 
    </nav> 

    <div class="content"> 

     <section id="section-1"> 
      <div class="tab-heading"> 
       <hr> 
       <h2 class="intro-text text-center"><strong>Product 1</strong></h2> 
       <hr> 
      </div> 
      ... 
     </section> 

     <section id="section-2"> 
      <div class="tab-heading"> 
       <hr> 
       <h2 class="intro-text text-center"><strong>Product 2</strong></h2> 
       <hr> 
      </div> 

      <a href="?p=details">Details</a> 

     </section> 
    </div> 
</div> 

Answer 1

आप स्टोर करने के लिए (जब उपयोगकर्ता के ब्राउज़र खुला है) के अंतिम उपयोग टैब और हर बार पुनः प्राप्त पृष्ठ लोड sessionStorage उपयोग कर सकते हैं:

$(document).load(function(){ 
    if (sessionStorage.getItem('lastsessionid') != null){ 
     //go to anchor, simulates the link click 
     $(document).scrollTop($(sessionStorage.getItem('lastsessionid')).offset().top); 
    } 
    $('a[href=#section*]').on('click', function(){ 
     sessionStorage.setItem('lastsessionid', this.href); 
    }); 
}); 

संपादित करें: woooow, यह बहुत अत्यधिक मतदान में बदल गया जवाब, मैं इसे सुधार दूंगा। मेरे समाधान का मुख्य विचार W3C standards के बारे में anchor के बारे में पहिया को पुन: पेश नहीं करना है, न केवल W3C अपेक्षा करता है (कुछ ब्राउज़र यह मानकों से आगे है), लेकिन प्रोग्रामिंग सामान्य ज्ञान से इसकी अपेक्षा क्या होती है। आईएमएचओ, जब आप किसी विशेषता की सीमाओं पर काबू पा रहे हैं तो सबसे महत्वपूर्ण बात यह है कि वे अपने प्राकृतिक व्यवहार को जारी रखने, 'जादू' सुविधाओं और कोड के अन्य टुकड़ों से बचने के लिए भविष्य में बनाए रखना मुश्किल हो जाएंगे। ओपी की आवश्यकता क्या थी और उसके बाद उपयोग करने के लिए किसी प्रकार का मूल्य स्टोर करना था।

अन्य दृष्टिकोण जो trigger तकनीकों का उपयोग करना आम है, लेकिन मैं दृढ़ता से ट्रिगर से बचने की अनुशंसा करता हूं क्योंकि आप अनावश्यक रूप से उपयोगकर्ता की बातचीत को अनुकरण कर रहे हैं और कभी-कभी, एप्लिकेशन के तत्व के क्लिक ईवेंट से जुड़े अन्य दिनचर्या होते हैं जहां बारी हो सकती है परेशान क्लिक करने का उपयोग करें। यह सच है कि जिस तरह से मैं लंगर व्यवहार किया भी नकली था, लेकिन, ठीक है, अंत में यह मेरे कोडिंग संस्कृति है चलाता से बचने के लिए घटना की जाने वाली कॉल की प्रकृति को बनाए रखने की सूचना किसी तरह का करने के लिए

$(document).load(function(){ 
    if (sessionStorage.getItem('lastsessionid') != null){ 
     //go to anchor, simulates the link click 
     $(sessionStorage.getItem('lastsessionid')).trigger('click'); 
    } 
    $('a[href=#section*]').on('click', function(){ 
     sessionStorage.setItem('lastsessionid', this.href); 
    }); 
}); 

, में वेब देवताओं के पुराने समय (मैं इतना पुराना नहीं हूं, लेकिन मैंने वेब dev. routine में जावास्क्रिप्ट को इतनी महान टूल में बदलने से पहले प्रोग्राम किया था) स्क्रिप्टिंग तकनीकों पर इतना भरोसा नहीं कर सका, तो वे किसी प्रकार का प्रचार करने के लिए क्या करते हैं व्यवहार ने उस पोस्ट को स्टोर किया है जो कुछ पोस्ट/एंटेरिएबल प्राप्त करता है और उस मूल्य को तब तक कायम रखता है जब तक कि उपयोगकर्ता वांछित दिनचर्या तक पहुंच न जाए, एंकर व्यवहार को मजबूर करने के लिए # {$ वांछित एंकर} के साथ लोड करने के लिए लिंक के माध्यम से मार्ग को मजबूर कर देता है। जाहिर है यह एक ऐसी विधि है जिसमें इसकी त्रुटियां और अंधेरे धब्बे हैं, लेकिन जब जावास्क्रिप्ट उद्योग में बड़ी भूमिका नहीं थी तब बहुत आम था। डिपार्टमेंट स्टोर से ऐसे छोटे पैड में काम करते समय कुछ देवताओं को उस विचार की आवश्यकता हो सकती है, उदाहरण के लिए, जहां पैड के ब्राउज़र जावास्क्रिप्ट ES4/ES5/ES6 नए कार्यों के साथ अच्छी तरह से काम करने के लिए बहुत पुराने हैं।

Answer 2

यदि मैं आपको सही ढंग से समझता हूं तो मैं बस एक सत्र तैयार करता हूं जो क्लिक को संग्रहीत करता है। जब आप क्लिक किए गए थे और दूरस्थ रूप से सत्र सेट करते हैं तो आप पंजीकरण के लिए AJAX का उपयोग करके इसे तेज़ी से और आसानी से पूरा कर सकते हैं। जब भी उपयोगकर्ता टैब पर क्लिक करता है तो यह सत्र बदल दिया जाएगा। यह लगातार बनाए गए अंतिम टैब के सत्र को बनाए रखेगा। यहां आवश्यक तीन तत्वों की संरचना है:

1। टैब अनुभाग आप इस प्रश्न (एचटीएमएल) में रखा है

2. अजाक्स पोस्ट टैब सत्र के भंडारण के लिए रिमोट फाइल करने के लिए चयनित (जे एस)

3. दूरस्थ भेजने फ़ाइल है कि सत्र में स्टोर करने के लिए टैब मूल्य प्राप्त होगा (पीएचपी)

---

AJAX POST यह स्निपेट उपयोगकर्ता को टैब पर क्लिक करने के लिए सुन देगा और फिर सहेजने के लिए php फ़ाइल में चयनित मान भेजेंगे। आप इसे एक अलग फ़ाइल में या सीधे अपने पृष्ठ के पाद लेख में रख सकते हैं। सुनिश्चित करें कि आपके पृष्ठ पर jquery काम कर रहा है।

$(".icon-cross").on("click",function(){ 
    var tabValue = $(this).attr('href'); 
    $.post('file-to-save-session.php', {tabSel: tabValue}, function(data){ 
     console.log(data); 
    }); 
}); 

त्वरित स्पष्टीकरण ... हम वर्ग के साथ टैब के लिए सुन (चिह्न-पार) हो हम तो वर tabValue में href विशेषता के मान स्टोर क्लिक करने के लिए,। फिर हम सहेजने के लिए AJAX के माध्यम से php फ़ाइल में मान पोस्ट करते हैं। एक बार यह सहेजा जाने के बाद यह पुनर्प्राप्त मूल्य को प्रतिबिंबित करेगा और फ़ंक्शन इसे देखने और डिबगिंग के लिए कंसोल में प्रदर्शित करेगा।

---

PHP फ़ाइल - बचाओ टैब चयनयह फ़ाइल आपके फाइल सिस्टम में कहीं भी रखा जा सकता है, बस ajax अनुरोध में सही ढंग से पथ इंगित करने के लिए सुनिश्चित करें।

<?php 

session_start(); 

if(isset($_POST['tabSel']) && $_POST['tabSel'] != ''){ 
    $_SESSION['selected_tab'] = $_POST['tabSel']; 
    echo $_SESSION['selected_tab']; 
}else{ 
    echo 'NO TAB SELECTION RECEIVED!'; 
} 

?> 

यह सुंदर आत्म व्याख्यात्मक है। यह पेज पर एक पोस्ट को सुन रहा है जिसमें एजेक्स पोस्ट के माध्यम से भेजा गया चर है। अगर पोस्ट भेजा जाता है और पोस्ट खाली नहीं होता है तो यह सत्र को सत्र में संग्रहीत करेगा। यदि नहीं, तो यह कुछ भी वापस नहीं करेगा और सत्र को स्वयं नहीं छूएगा। टैब के साथ

---

अपनी HTML फ़ाइलइतना ही नहीं बल्कि अब आप उपयोगकर्ता द्वारा पिछले चयनित टैब का मूल्य देखने के लिए अपने पृष्ठ के शीर्ष करने के लिए इस कोड का टुकड़ा जोड़ सकते हैं। यह उस पृष्ठ पर जाएगा जहां आपके टैब हैं। यदि वह पहले से

<?php 
session_start(); 

if(isset($_SESSION['selected_tab'])){ 
    echo $_SESSION['selected_tab']; 
} 
?> 

अब आप अपने पृष्ठ पर पहले से चयनित टैब को देखने के लिए सक्षम हो जाएगा नहीं है आप php में html फ़ाइल कन्वर्ट करने के लिए आवश्यकता हो सकती है। आप इसे अंतिम php चर में संग्रहीत कर सकते हैं या अंतिम चयनित टैब को हाइलाइट या प्रदर्शित करने के लिए बस सत्र को किसी कथन में डाल सकते हैं।

आशा है कि इससे मदद मिलती है! अगर आपको इस मामले पर और मदद की ज़रूरत है तो मुझे बताएं :)।

---

अद्यतन: जावास्क्रिप्ट अधिरोहण प्लगइन द्वारा जोड़ा जा रहा है: (के तहत सभी फ़ाइलों जे एस) अपने पृष्ठ के नीचे करने के लिए इस जोड़े

<?php if(isset($_SESSION['selected_tab'])){ ?> 
    <script> 
     $(".icon-cross").removeClass('tab-current'); 
     $("section").removeClass('content-current'); 
     $('[href="<?php echo $_SESSION['selected_tab']; ?>"]').addClass('tab-current'); 
     $('section<?php echo $_SESSION['selected_tab']; ?>').addClass('content-current'); 
    </script> 
<?php } ?> 

पहले दो पंक्तियों को हटा देगा सभी चयनित टैब और उनके शीर्षकों से वर्तमान कक्षा, दूसरा कक्षा में सहेजे गए टैब में कक्षा को जोड़ देगा। यदि कोई सत्र नहीं है, तो यह कोड नहीं चलेगा।

Answer 3

समस्या टैब के लिए सामान्य पुस्तकालय टैब के लिंक के हैश को संरक्षित नहीं करता है। इसलिए, आपका ब्राउज़र टैब की प्रगति को ट्रैक करने में असमर्थ है और इसलिए टैब के मामले में बैक बटन काम नहीं करता है।

तो विचार टैब में # लिंक को संरक्षित करना है। यदि कोई इसे संरक्षित करने में सक्षम है तो ब्राउज़र टैब के माध्यम से उपयोगकर्ताओं की प्रगति को ट्रैक करने में सक्षम होगा और बैक बटन पिछले टैब पर उपयोगकर्ता को जमीन देगा।

आप hash की संपत्ति में # मान स्टोर कर सकते हैं।

नीचे

Bootstrap 3: Keep selected tab on page refresh

इस उत्तर देखें आपके लिए एक समाधान हो सकता है।

इसके बाद, आपने हैश को संरक्षित किया है और अब जावास्क्रिप्ट के onhashchange ईवेंट को कैप्चर करके ब्राउज़र के बैक बटन को अपने संक्रमणों को संभालने में सक्षम है।

यहां, जब आप ब्राउज़र में वापस हिट करते हैं तो आप टैब को बदल सकते हैं।

आशा है कि इससे मदद मिलेगी।

Answer 4

मैं आप इस https://css-tricks.com/using-the-html5-history-api/

Answer 5

पर देखने के प्रत्येक tab.Then के लिए आईडी दें की जरूरत है,

$(".icon-cross").click(function(){ 
    var selected_id= $(this).attr('id); 
    //save this id to cookie.Then retrieve this cookie value on next page visit 
})