CSS левая помощь JQuery - PullRequest
Новая
       21

CSS левая помощь JQuery

0 голосов
/ 23 октября 2009

хорошо, так что в основном у меня есть такая установка: 

<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>

Теперь мой CSS выглядит так: 

#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 составляет 50 пикселей, то tab_two верх будет 50px. Мне нужно, чтобы это было 0px. Это работает, если я установил его на абсолютный и затем вернуться к относительному, но это не возможно для проекта, который я работает, потому что он перезагружает вкладку, что я не хочу, чтобы это произошло. любой помочь выяснить, как перекрывать или сделать его 0 вместо 50 будет с благодарностью.

Ответы [ 2 ]

2 голосов
/ 23 октября 2009

Похоже, у вас есть абсолютная позиция и относительная перепутанность позиции ... посмотрите этот замечательный урок по позиционированию 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;
 })
})

РЕДАКТИРОВАТЬ: Opps CSS ".tabs a" в коде вставки был оставлен с тех пор, как я начинал с каждой вкладки в качестве div ... она ничего не делает, поэтому вы можете игнорировать ее LOL.

0 голосов
/ 23 октября 2009

Вместо использования смещений вы можете скрывать / отображать вкладки с помощью свойства display. Добавьте класс «tab» к контейнерам вкладок: 

<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». Конечно, если у вас есть динамическое количество вкладок с динамическими идентификаторами, это решение не будет работать для вас.

...