Форум

ami_moor · #1 (**permalink**) 25.07.2014, 12:07

Реализованы табы
Подскажите как избавиться от прыжков в браузерах (при клике на ссылку таба, страница автоматически прыгает вверх (если есть текст внизу и вверху).
Избавление от href='#' не дало никакого результата...

<ul id="tabs">
        <li><a class="tab-vk1" title="tab1">Визуальный осмотр</a></li>
        <li><a class="tab-vk2" title="tab2">Микроскопирование</a></li>
      
    </ul>
 <div id="content">
        <div id="tab1">
            <p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>

        </div>
        <div id="tab2">Второй контент</div>
    </div>

Код:

#tabs
{
  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#tabs li
{
    margin: 0;
    padding: 0;
    float: left;
}
 
#tabs a
{
    -moz-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    -webkit-box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background:    -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    background:         linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}
 
#tabs a:hover
{
    background: #c93434;
    background:    -moz-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #c93434 10px);
    background:         linear-gradient(220deg, transparent 10px, #c93434 10px);
}
 
#tabs a:focus
{
    outline: 0;
}
 
#tabs #current a
{
    background: #fff;
    background:    -moz-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:    -webkit-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:     -ms-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:      -o-linear-gradient(220deg, transparent 10px, #fff 10px);
    background:         linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;
    color: #333;
}
 
#content
{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
    background-image:     -ms-linear-gradient(top, #fff, #ddd);
    background-image:      -o-linear-gradient(top, #fff, #ddd);
    background-image:         linear-gradient(top, #fff, #ddd);
    -moz-border-radius: 0 2px 2px 2px;
    -webkit-border-radius: 0 2px 2px 2px;
    border-radius: 0 2px 2px 2px;
    -moz-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    -webkit-box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}

$(document).ready(function() {
        $("#content div").hide(); // Скрытое содержимое
        $("#tabs li:first").attr("id","current"); // Какой таб показать первым
        $("#content div:first").fadeIn(); // Показ первого контента таба

 
    $('#tabs a').click(function(e) {
        e.preventDefault();
        $("#content div").hide(); //Скрыть всё содержимое
        $("#tabs li").attr("id",""); //Сброс идентификаторов
        $(this).parent().attr("id","current"); // Активация идентификаторов
        $('#' + $(this).attr('title')).fadeIn(); // Показать содержимое текущей вкладки
        
    });

})();

рони · #2 (**permalink**) 25.07.2014, 12:35

ami_moor,
строка 8 у вас есть недолжно прыгать ... проверьте html

cyber_bober · #3 (**permalink**) 25.07.2014, 13:13

Потому что нет параметра href="" у ссылки.

UPD.
Cмоделил у себя

<li><a class="tab-vk1" title="tab1" href="">Визуальный осмотр</a></li>
        <li><a class="tab-vk2" title="tab2" href="">Микроскопирование</a></li>

все работает без прыжков

ami_moor · #4 (**permalink**) 25.07.2014, 13:50

Вы наверное не добавили текст вверху и внизу, прыгает когда есть ещё что нас странице то помимо табов

ami_moor · #5 (**permalink**) 25.07.2014, 13:51

Сообщение от cyber_bober

Потому что нет параметра href="" у ссылки.

UPD.
Cмоделил у себя

<li><a class="tab-vk1" title="tab1" href="">Визуальный осмотр</a></li>
        <li><a class="tab-vk2" title="tab2" href="">Микроскопирование</a></li>

все работает без прыжков

<p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
       <p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
       <p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
       <p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
<ul id="tabs">
        <li><a class="tab-vk1" title="tab1" href="">Визуальный осмотр</a></li>
        <li><a class="tab-vk2" title="tab2" href="">Микроскопирование</a></li>
      
    </ul>
 <div id="content">
        <div id="tab1">
            <p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>

        </div>
        <div id="tab2">Второй контент</div>
    </div>

       <p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
       <p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
       <p>Lorem ipsum sit amet
Praesent risus nisi, iaculis nec condimentum vel, rhoncus vel dolor. Aenean nisi lectus, varius nec tempus id, dapibus non quam.
Suspendisse ac libero mauris. Cras lacinia porttitor urna, vitae molestie libero posuere et. Mauris turpis tortor, mollis non vulputate sit amet, rhoncus vitae purus.
Pellentesque habitant
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>

Прыгает в вверх страницы, когда находишься внизу и кликаешь по табам

cyber_bober · #6 (**permalink**) 26.07.2014, 08:03

Не, парень, у тебя косяк в другом куске кода, с табами все норм. У блока с табами отступ в 1000px от верха, чтобы проверить

Видео с табами

ami_moor · #7 (**permalink**) 28.07.2014, 11:18

Сообщение от cyber_bober

Не, парень, у тебя косяк в другом куске кода, с табами все норм. У блока с табами отступ в 1000px от верха, чтобы проверить

Видео с табами

cyber_bober, я нигде не указывала отступ от верха в 1000px, можете ли вы мне конкретно указать в каком месте кода у меня ошибка, а то я уже голову сломала

рони · #8 (**permalink**) 28.07.2014, 11:24

ami_moor,
как можно без кода вам помочь -- в той части кода что вы показали ошибок нет - 1000 это для примера было.

cyber_bober · #9 (**permalink**) 28.07.2014, 16:03

ami_moor,
Я сам сделал отступ в 1000px чтобы табы находились не в верху страницы, для того чтобы проверить прыгают, или нет. Ошибка 100% не в коде табов. Давайте больше кода страницы.

Сорри, что обозвал парнем.

hfts_rider · #10 (**permalink**) 28.07.2014, 16:55

Можешь попробовать убрать "e.preventDefault();" и написать в конце "return false;", хотя "preventDefault" должен работать...

Форум

Справочник

Discord чат

Курсы javascript