Конфликтует bootstrap и jquery (ajax), что делать?

304
06 апреля 2017, 19:11

В общем такая вот ситуация: Есть файл 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">
    -->
Answer 1

Я тоже столкнулся с аналогичной проблемой, используйте встроенный css и js от laravel, app.js(ajax и bootstrap.js) и app.css(bootstrap.css).

READ ALSO
Как можно улучшить верстку? [требует правки]

Как можно улучшить верстку? [требует правки]

Как можно улучшить верстку ( глобально и точечно) ? Бэм и адаптивность не делал

244
Узор поверх всех изображений на сайте

Узор поверх всех изображений на сайте

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

225
IE label исчезает при нажатии tab

IE label исчезает при нажатии tab

Есть поля ввода текста с label слева от них к каждомуТолько в Internet Explorer (9) при нажатии на Tab на клавиатуре с фокусом на следующее поле ввода у него...

278