Bootstrap 4: как заставить навигацию по вкладкам оставаться на месте?
Используя навигацию по вкладкам bootstrap 4, каждый щелчок по вкладке переходит на правую панель вкладок, но не остается там, где должен быть.
Если панель слишком длинная для окна просмотра, после загрузки она перемещается вверх страницы, маскируя вкладки навигации. Я наткнулся на несколько решений для начальной загрузки 3, но не могу найти их для начальной загрузки 4.
Любая помощь будет оценена, спасибо.
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
687
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Глядя на ваш код, я нашел этот фрагмент кода, его удаление должно помочь
/*========== SMOOTH SCROLLING TO LINKS ==========*/
$(document).ready(function(){ //document is loaded
// Add smooth scrolling to all links
$("a").on('click', function(event) {//click on any link;anchor tag;
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") { //for e.g. website.com#home - #home
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
//console.info('hash:',hash)
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({ //animate whole html and body elements
scrollTop: $(hash).offset().top //scroll to the element with that hash
}, 800, function(){ // speed of animation
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash; //website.com - website.com#home
//Optional remove "window.location.hash = hash;" to prevent transparent navbar on load
});
} // End if
});
});
Большое спасибо Давиддд. На самом деле, мне просто нужно было прокомментировать последнюю строку: //window.location.hash = hash;
—
28.06.2019 12:51
Он отлично работает и в Bootstrap 4. Это может быть проблема с вашим css или каким-то фрагментом кода. проверьте здесь о панели вкладок
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Bootstrap Example</title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class = "container">
<ul class = "nav nav-tabs" role = "tablist">
<li class = "nav-item">
<a class = "nav-link active" data-toggle = "tab" href = "#home">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" data-toggle = "tab" href = "#menu1">Menu 1</a>
</li>
<li class = "nav-item">
<a class = "nav-link" data-toggle = "tab" href = "#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class = "tab-content">
<div id = "home" class = "container tab-pane active"><br>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
<div id = "menu1" class = "container tab-pane fade"><br>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div> <div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
<div id = "menu2" class = "container tab-pane fade"><br>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div> <div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
</div>
</div>
</body>
</html>Другие вопросы по теме
Как использовать ngx-bootstrap на stackblitz.com без использования <link href> для импорта bs css?
Popper.js не работает, если импортирован загрузочный CSS?
Правильно расположите текстовую панель под логотипом
Laravel не загружает бутстрап на мобильное устройство
Гамбургер-меню отображается всегда, даже на рабочем столе
Я хочу сделать изменяющийся «массив» параметров цвета и размера для каждого элемента в панели администратора
Как поместить цвет фона * за * кнопку начальной загрузки
Как поместить одну кнопку в верхнюю часть строки с помощью начальной загрузки btn-group?
Как разместить div за пределами правого верхнего угла моей формы с помощью начальной загрузки?
Замена класса bootstrap 3 на bootstrap 4
Похожие вопросы
Как динамически скрыть элемент html, если другой элемент пуст
Как я могу сделать таблицу Bootstrap с липкой головкой таблицы?
Создание эффекта мигающего века с помощью CSS
CSS не будет применяться к файлам ejs
Использование Laravel bootstrap css для стилизации только части страницы
Строки внутри контейнера скрыты сверху
Доступ к определенному диапазону через входной идентификатор
Возникли трудности с созданием фиксированного заголовка при прокрутке. Типичное решение больше не работает для меня
Может кто-нибудь сказать мне, почему a:hover не работает?
Как вертикально выровнять диапазон и div в одной строке
Пожалуйста, опубликуйте код, который вы пробовали