Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.07.2014, 12:07
Аспирант
Отправить личное сообщение для ami_moor Посмотреть профиль Найти все сообщения от ami_moor
 
Регистрация: 27.08.2013
Сообщений: 32

Прыгает браузер
Реализованы табы
Подскажите как избавиться от прыжков в браузерах (при клике на ссылку таба, страница автоматически прыгает вверх (если есть текст внизу и вверху).
Избавление от 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

ami_moor,
строка 8 у вас есть недолжно прыгать ... проверьте html
Ответить с цитированием
  #3 (permalink)  
Старый 25.07.2014, 13:13
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

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

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


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

Последний раз редактировалось cyber_bober, 25.07.2014 в 13:22.
Ответить с цитированием
  #4 (permalink)  
Старый 25.07.2014, 13:50
Аспирант
Отправить личное сообщение для ami_moor Посмотреть профиль Найти все сообщения от ami_moor
 
Регистрация: 27.08.2013
Сообщений: 32

Вы наверное не добавили текст вверху и внизу, прыгает когда есть ещё что нас странице то помимо табов
Ответить с цитированием
  #5 (permalink)  
Старый 25.07.2014, 13:51
Аспирант
Отправить личное сообщение для ami_moor Посмотреть профиль Найти все сообщения от ami_moor
 
Регистрация: 27.08.2013
Сообщений: 32

Сообщение от 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>



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

Последний раз редактировалось ami_moor, 25.07.2014 в 13:58.
Ответить с цитированием
  #6 (permalink)  
Старый 26.07.2014, 08:03
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

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

Видео с табами
Ответить с цитированием
  #7 (permalink)  
Старый 28.07.2014, 11:18
Аспирант
Отправить личное сообщение для ami_moor Посмотреть профиль Найти все сообщения от ami_moor
 
Регистрация: 27.08.2013
Сообщений: 32

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

Видео с табами
cyber_bober, я нигде не указывала отступ от верха в 1000px, можете ли вы мне конкретно указать в каком месте кода у меня ошибка, а то я уже голову сломала
Ответить с цитированием
  #8 (permalink)  
Старый 28.07.2014, 11:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

ami_moor,
как можно без кода вам помочь -- в той части кода что вы показали ошибок нет - 1000 это для примера было.
Ответить с цитированием
  #9 (permalink)  
Старый 28.07.2014, 16:03
Аспирант
Отправить личное сообщение для cyber_bober Посмотреть профиль Найти все сообщения от cyber_bober
 
Регистрация: 12.12.2012
Сообщений: 80

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

Сорри, что обозвал парнем.
Ответить с цитированием
  #10 (permalink)  
Старый 28.07.2014, 16:55
Аватар для hfts_rider
Профессор
Отправить личное сообщение для hfts_rider Посмотреть профиль Найти все сообщения от hfts_rider
 
Регистрация: 26.01.2014
Сообщений: 181

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Страница прыгает на верх smalexxx jQuery 13 22.07.2013 17:58
Сайт торент видео онлайн (через браузер). nemo84 Ваши сайты и скрипты 1 18.05.2013 21:07
Как сделать, чтобы при удалении div браузер не перепрыгивал наверх станицы EvgeniyRRU Events/DOM/Window 4 02.10.2011 12:42
как сделать так, чтоб браузер смог отличить знак больше от закрытия тэга? FirstFrost Общие вопросы Javascript 8 17.07.2010 22:55
как проверить поддеружет браузер определенное событие? GOll Элементы интерфейса 9 24.07.2008 14:40