В общем такая вот ситуация: Есть файл welcome.blade.php в котором написаны скрипт jquery, который ajax-ом подгружает страницы и в меню должны подсвечивать красным цветом выбранные. Подключена библиотека бутстрап, которая дает возможность сайту сворачиваться по блокам как нужно. Но беда в том, что при подключении бутстрапа - ajax-выделение красным цветом в подменю НЕ работает, но если отключить библиотеку бутстрапа, то все выделяется и подсвечивает... Подскажите как быть в такой ситуации... Где я что не так сделал или не учел? файл header_style.css:
.activeEv{
color: red !important; /* Цвет активной ссылки */
}
файл welcome.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link href="bootstrap-3/css/bootstrap.css" rel="stylesheet" type="text/css"/> <!-- Если убрать эту строку, то .activeEv срабатывает -->
<!--
<link href="../../public/css/app.css" rel="stylesheet" type="text/css"> <!-- Если поставить эту строку вместо предыдущей, бутстрап НЕ работает, а .activeEv срабатывает-->
-->
<link href="bootstrap-3/css/header_style.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
@include('header')
<div class="container-fluid">
<div class="row">
<div class="navbar navbar-default">
<div class="container ">
<div class="col-md-8 col-md-offset-2 col-sm-12">
<ul class="nav navbar-nav centermenu">
<li class="loadBtn"><a name="top"> languages </a></li>
<li class="loadBtn"><a> targets </a></li>
<li class="loadBtn"><a> bd </a></li>
<li class="loadBtn"><a> instruction </a></li>
<li class="loadBtn"><a> cooperation </a></li>
</ul>
</div></div></div></div></div>
<div class="container">
<div id="content"><a></a> </div>
</div>
<script>
$(document).ready(function(){
var tpls = ['languages.blade.php', 'targets.blade.php', 'bd.blade.php', 'instruction.blade.php', 'cooperation.blade.php'];
$('.loadBtn').click(function(){
$('.loadBtn').removeClass('activeEv');
$(this).addClass('activeEv');
loadContent($(this).index());
});
loadContent(0);
function loadContent(index) {
if (!tpls[index]) return;
$.ajax({
url: tpls[index],
cache: false,
success: function(html){
$("#content").html(html);
}
});
}
});
</script>
</div>
@include('footer')
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3/js/bootstrap.js"></script>
</body>
Изменил подключение библиотек в файле welcome.blade.php:
<!--
<link href="../../public/css/app.css" rel="stylesheet" type="text/css">
-->
Я тоже столкнулся с аналогичной проблемой, используйте встроенный css и js от laravel, app.js(ajax и bootstrap.js) и app.css(bootstrap.css).
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Как можно улучшить верстку ( глобально и точечно) ? Бэм и адаптивность не делал
Появилась необходимость добавить некоторый узор поверх всех изображений на сайтеСделать нужно в браузере, а не на сервере, но так как тег...
Есть поля ввода текста с label слева от них к каждомуТолько в Internet Explorer (9) при нажатии на Tab на клавиатуре с фокусом на следующее поле ввода у него...