Bootstrap dropdown selection делает скачок экрана

Итак, я использую bootstrap для своего веб-сайта, и у меня есть много div на каждой странице с выпадающим списком, каждый из которых изменяет информацию внутри div с диаграммы на таблицу и наоборот. Это прекрасно работает, за исключением случаев, когда пользователь выбирает параметр из выпадающего экрана, кажется, что он «прыгает», помещая этот div в верхнюю часть экрана. Я нашел аналогичную проблему для кого-то другого, говоря, что она имеет какое-то отношение к тегу привязки (#), но я считаю, что мне нужна моя, так как выпадающее приложение действительно ссылается на что-то.Bootstrap dropdown selection делает скачок экрана

DROPDOWN:

<div class="dropdown"> 
    <button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall"> 
     <!--DROPDOWN MENU--> 
     <li role="presentation"> 
     <a role="menuitem" tabindex="-1" href="#graphOneData">Data</a> 
     </li> 
     <li role="presentation"> 
     <a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a> 
     </li> 
     <li role="presentation"> 
     <a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a> 
     </li> 
     <li role="presentation"> 
     <a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a> 
    </li> 
    </ul> 
</div>

СОДЕРЖАНИЕ IT ПРИЗЫВАЕТ:

<div class="content active row" id="graphOneChart"> 
    ............ 
</div> 
<div class="content" id="graphOneData"> 
    ............ 
</div>

источник

2015-06-17 Mr. Bond

При использовании тега привязки, <a>, он будет автоматически переходить к месту, что href тег, указывающий. Если ваша ссылка указывает на идентификатор на странице, ссылка будет прокручивать экран до элемента, на который указывает ссылка. Если вы хотите использовать ссылку для вызова функции, оставьте атрибут href пустым, href="".

источник

2015-06-17 13:09:20 msinnes

Я пробовал это, но страница перезагрузилась, и я не выбрал бы вид в div –

Извините, в JavaScript вам необходимо предотвратить действие по умолчанию для ссылки. Добавьте слушателя 'onclick'. Должен выглядеть так: function (e) {e.preventDefault(); // здесь код}. Это должно остановить перезагрузку страницы, а затем вы можете загрузить необходимый контент. – msinnes

Используйте этот код здесь в функции init или в теге 'script' в нижней части страницы. 'document.getElementById (« link-to-stop »). addEventListener (« click », function (e) {e.preventDefault()});' – msinnes

Если вы используете хеш-код # в привязке, браузер автоматически перейдет к элементу с соответствующим идентификатором.

Например, нажав на:

<a href="#graphOneData">Data</a>

Вызовет страницы, чтобы перейти к:

<div id="graphOneData"></div>

Чтобы этого не произошло, либо изменить идентификатор DIV или HREF якоря ,

источник

2015-06-17 13:15:23

Когда я это делаю, кнопка не открывает содержимое внутри div –

Чтобы сохранить страницу от прыжка, вы можете полностью удалить href = "" и просто оставить тег пустым, как это <a>, тогда он не прыгнет.

Если вам нужно сохранить тег href, вы можете использовать e.preventDefault() в своем методе click или on.

источник

2017-07-20 01:00:49 blamb

Bootstrap dropdown selection делает скачок экрана

ответ

Смежные вопросы