المغلق مساعدة ترك مسج

Question

وطيب وذلك أساسا لدي إعداد مثل هذا:

<div id="tabs">
    <div id="tab_one">
        Something here
    </div>

    <div id="tab_two">
        Something else here
    </div>

    <div id="tab_three">
        Another thing here
    </div>
</div>

والآن لي المغلق يبدو مثل هذا:

#tab_one {
    position:relative;
    left:0px;
    top:0px;
}
#tab_two {
    position:relative;
    left:5000px;
}
#tab_three {
    position:relative;
    left:5000px;
}

وذلك أساسا ما أقوم به هنا يظهر فقط tab_one. ثم عندما tab_two ينقر المستخدم يتغير tab_two إلى اليسار: 0px؛ والتغيرات tab_one إلى اليسار: 5000px؛ (ليتحول فقط إلى خاصية). ولأن النسبية أنها تسير المشكلة دون ارتفاع من علامة التبويب التي كانت قبل ذلك. إذا كان الأمر كذلك ارتفاع tab_one هو 50px ثم في tab_two سوف يكون أعلى 50px. أنا في حاجة إليها أن 0px. وهو يعمل إذا أنا تعيينها إلى المطلق و ثم العودة إلى قريب ولكن لم يكن ذلك ممكنا للمشروع الذي أنا العمل على أنه تعيد تحميل علامة التبويب التي لا تريد أن يحدث. أي مساعدة في معرفة كيفية تداخل أو جعله 0 بدلا من 50 سيكون تقدير كبير.

Answer 1

ويبدو ان لديك قد يكون موقفكم المطلق وموقف قريب اختلطت ... تحقق من هذا البرنامج التعليمي كبير على <لأ href = "http://www.barelyfitz.com/screencast/html-training/css / المواقع / "يختلط =" نوفولو noreferrer "> CSS المواقع .

وأن يقال، وأنا ألقى معا هذا المثال بالنسبة لك أن تنظر في ( العمل هنا ).

وCSS

.tabs {
 position: relative;
 left: 0;
 top: 0;
}
.info {
 position: absolute;
 left: -5000px;
 top: 25px;
}
.active {
 position: absolute;
 top: 25px;
 left: 0;
}

وHTML

<div class="tabs">
 <a href="#tab_one">Tab 1</a>
 <a href="#tab_two">Tab 2</a>
 <a href="#tab_three">Tab 3</a>

 <div>
  <div id="tab_one" class="info">
   Something here
  </div>

  <div id="tab_two" class="info">
   Something else here
  </div>

  <div id="tab_three" class="info">
   Another thing here
  </div>
</div>

وسيناريو

$(document).ready(function(){
 // select first tab, get ID
 var tmp = $('.tabs a:eq(0)').attr('href');
 $(tmp).removeClass('info').addClass('active');

 // tab display
 $('.tabs a').click(function(){
  $('.tabs div > div').removeClass('active').addClass('info');
  $( $(this).attr('href') ).addClass('active');
  return false;
 })
})

وتحرير: انتبه ل".tabs على" تركت CSS في كود باستبين على من عندما بدأت مع كل علامة تبويب باعتبارها شعبة ... أنها لا تفعل أي شيء، لذلك يمكنك تجاهله LOL

Answer 2

وبدلا من استخدام التعويضات، يمكنك إخفاء / إظهار علامات التبويب مع الخاصية display. إضافة "علامة التبويب" الفئة إلى حاويات التبويب:

<div id="tabs">
    <div id="tab_one" class="tab">
        Something here
    </div>

    <div id="tab_two" class="tab">
        Something else here
    </div>

    <div id="tab_three" class="tab">
        Another thing here
    </div>
</div>

والأنماط هي:

.tab { display: none } /* Don't render by default */

.show_tab_one #tab_one,
.show_tab_two #tab_two,
.show_tab_three #tab_three { display: block } /* Selectively render */

وكل ما عليك القيام به هو تعيين فئة من عنصر #tabs إلى واحدة من "show_tab_one"، "show_tab_two" أو "show_tab_three". وبطبيعة الحال، إذا كان لديك عدد حيوية من علامات التبويب مع هويات ديناميكية، وهذا الحل لن يعمل لك.