جشنواره عیدانه راکت | عضویت ویژه راکت برای آخرین بار | افزایش قیمت‌ها از سال جدید | و ...

مشاهده اطلاعات بیشتر...
ثانیه
دقیقه
ساعت
روز
Sina
4 سال پیش توسط Sina مطرح شد
4 پاسخ

نحوه پین کردن تب منو

سلام
وقت بخیر
یه تب منو وجود داره که شامل دو تا تب میشه که طبیعتا هر کدوم هم محتوای مختص به خودش رو داره من میخوام بدونم با استفاده از جاوا اسکریپ (یا هر روش دیگه) میشه کاری کرد که هر کاربر با توجه به نیازش یکی از تب ها رو پین کنه و زمانی که صفحه رفرش میشه یا مرورگر بسته میشه و دوباره وارد این صفحه میشه همون تبی که پین کرده نمایش داده بشه ؟
با توجه به اینکه این صفحه استاتیک هست و کاربران لاگین هم نمیکنن چه جوری میشه مدیریتش کرد ؟
من سرچ هم کردم ولی به نتیجه ای نرسیدم ممنون میشم اگه با مثال راهنمایی بفرمایید


ثبت پرسش جدید
GHM
تخصص : دولوپر نیمه‌استک
@GHM 4 سال پیش مطرح شد
1

کوکی‌ها راه‌حل‌های خوبی هستند همچنین از Web Storage و IndexedDB و روش‌های مدرن هم میتونید استفاده کنید.


Sina
@sinayas1 4 سال پیش آپدیت شد
0

@GHM ممنون از راهنمایی شما
امکانش هست با مثال بفرمایید ب شکلی باید پیاده سازی بشه ؟
من چه جوری میتونم مثلا روی تب منو با کد زیر اونو پیاده سازی کنم ؟

<div class="row ml-md-0 mr-md-0 vertical-tab tab-minimal">
   <ul class="nav nav-tabs col-md-2 justify-content-between" role="tablist">
      <li class="nav-item">
         <a class="nav-link" id="tab-2-1" data-toggle="tab" href="#dashboard-2-1" role="tab" aria-controls="dashboard-2-1" aria-selected="false">
         <i class="mdi mdi-speedometer"></i>Dashboard</a>
      </li>
      <li class="nav-item">
         <a class="nav-link" id="tab-2-2" data-toggle="tab" href="#message-2-2" role="tab" aria-controls="message-2-2" aria-selected="false">
         <i class="mdi mdi-message-outline"></i>Messages</a>
      </li>
   </ul>
   <div class="tab-content col-md-10">
      <div class="tab-pane fade" id="dashboard-2-1" role="tabpanel" aria-labelledby="tab-2-1">
         <div class="row">
            <div class="col-md-5">
               <img class="img-fluid rounded" src="../../../assets/images/samples/tab_preview/04.png" alt="tab Preview"> 
            </div>
            <div class="col-md-7 pl-md-5">
               <div class="wrapper mb-4">
                  <h4 class="mb-3">
                     <i class="mdi mdi-speedometer mr-3"></i>Anonymous Proxy
                  </h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
               </div>
               <div class="wrapper mt-4 pt-4">
                  <h4 class="mb-3">
                     <i class="mdi mdi-speedometer mr-3"></i>Addiction When Gambling
                  </h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
               </div>
            </div>
         </div>
      </div>
      <div class="tab-pane fade" id="message-2-2" role="tabpanel" aria-labelledby="tab-2-2">
         <div class="row">
            <div class="col-md-5">
               <img class="img-fluid rounded" src="../../../assets/images/samples/tab_preview/04.png" alt="tab Preview"> 
            </div>
            <div class="col-md-7 pl-md-5">
               <div class="wrapper mb-4">
                  <h4 class="mb-3">
                     <i class="mdi mdi-speedometer mr-3"></i>Anonymous Proxy
                  </h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
               </div>
               <div class="wrapper mt-4 pt-4">
                  <h4 class="mb-3">
                     <i class="mdi mdi-speedometer mr-3"></i>Addiction When Gambling
                  </h4>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 4 سال پیش مطرح شد
2

از رویداد onclick در جاوااسکریپت استفاده کنید و ID گزینه ای رو که انتخاب میشه در یه کوکی ذخیره کن..
وقتی پیج کاملا لود شد »» چک کنید اگر اون مقدار کوکی ست شده باشه : خوب سلکتش کنید . اگرم نه که هیچی


GHM
تخصص : دولوپر نیمه‌استک
@GHM 4 سال پیش مطرح شد
0

آقای بیات در بالا توضیح دادن، شما فقط کافیه برای کاربر کوکی ست کنید و توسط این کوکی تشخیص بدید که تب موردنظر پین شده یا خیر. سازوکارش هم به اینصورته میگی اگه کوکی با مقدار فلان آی‌دی (یا هرچی خودت خواستی) ست شده بود، تب رو پین کن درغیر اینصورت هیچی... اگه از کتابخانه یا فریمورک JS استفاده میکنید که توابع آماده براتون ساختن اگر از JSخاصل استفاده میکنید و در حد 4- 5 تب دارید مشکلی نیست میتونید همه رو در یک کوکی مدیریت کنید ولی اگه زیادتر از ایناست برای خودتون توابع تر و تمیز بنویسید یا از کتابخانه‌های کم‌حجم کوکی استفاده کنید تا مدیریت بهتری داشته باشید.


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام