In general, such a situation:
There is a Welcome.Blade.php file in which the jQuery script is written, which the AJAX-Ohm loads the pages and the menu must highlight the selected red. A bootstrap library is connected, which allows the site to turn around the blocks as needed. But the trouble is that when connecting the boatstrap – AJAX-highlighting in red in the submenu does not work, but if you disable the library of the boatstrap, then everything stands out and highlights … Tell me how to be in such a situation … where I didn’t do it or did not take into account?
file header_style.css:
. Activeev {
Color: Red! Important; / * Active Link Color * /
}
Welcome.Blade.php file:
& lt;! doctype HTML & gt;
& lt; HTML LANG = "EN" & GT;
& lt; Head & gt;
& lt; Meta Charset = "UTF-8" & GT;
& lt; Meta http-equiv = "x-ua-compatible" content = "ie = edge" & gt;
& lt; Meta name = "ViewPort" CONTENT = "WIDTH = device-width, initial-scale = 1" & gt;
& lt; link href = "https://fonts.googleapis.com/css?family=raleway:100,600" REL = "STYESHEET" TYPE = "TEXT / CSS" & gt;
& lt; link href = "bootstrap-3 / css / bootstrap.css" REL = "STYESHEET" TYPE = "TEXT / CSS" / & GT; & lt;! - If you remove this string, then .Active TV is triggered - & gt;
& lt;! -
& lt; link href = "../../ public / css / app.css" REL = "STYLESHEET" TYPE = "TEXT / CSS" & gt; & lt;! - If you put this line instead of the previous one, the bootstrap does not work, and .Active TV is triggered - & gt;
- & gt;
& lt; link href = "bootstrap-3 / css / header_style.css" REL = "STYLESHEET" TYPE = "TEXT / CSS" / & GT;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/JQuery/2.2.4/jquery.min.js" & gt; & lt; / script & gt;
& lt; / Head & gt;
& lt; Body & gt;
@include ('Header')
& lt; div class = "Container-Fluid" & gt;
& lt; div class = "row" & gt;
& lt; div class = "navbar navbar-default" & gt;
& lt; div class = "Container" & gt;
& lt; div class = "COL-MD-8 COL-MD-OFFSET-2 COL-SM-12" & GT;
& lt; ul class = "nav navbar-nav centermenu" & gt;
& lt; Li class = "LoadBTN" & gt; & lt; a name = "top" & gt; Languages & lt; / a & gt; & lt; / li & gt;
& lt; li class = "LoadBTN" & gt; & lt; a & gt; targets & lt; / a & gt; & lt; / li & gt;
& lt; li class = "LoadBTN" & gt; & lt; a & gt; BD & LT; / A & GT; & lt; / li & gt;
& lt; li class = "LoadBTN" & gt; & lt; a & gt; INSTRUCTION & LT; / A & GT; & LT; / Li & GT;
& lt; li class = "LoadBTN" & gt; & lt; a & gt; Cooperation & LT; / A & GT; & lt; / li & gt;
& lt; / ul & gt;
& lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / div & gt;
& lt; div class = "Container" & gt;
& lt; div id = "Content" & gt; & lt; a & gt; & lt; / a & gt; & lt; / div & gt;
& lt; / div & gt;
& lt; script & gt;
$ (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 LOADCONTENTENT (INDEX) {
if (! TPLS [INDEX]) RETURN;
$.ajax ({
URL: TPLS [index],
Cache: False,
SUCCESS: FUNCTION (HTML) {
$ ("# content"). HTML (HTML);
}
});
}
});
& lt; / script & gt;
& lt; / div & gt;
@INCLUDE ('Footer')
& lt; script
src = "https://code.jquery.com/jquery-1.12.4.min.js"
Integrity = "SHA256-ZOSEBRLBNQZLPNKIKEDRPV7LOY9C27HHQ + XP8A4MXAQ ="
Crossorigin = "Anonymous" & gt; & lt; / script & gt;
& lt;! - jQuery (Necessary for Bootstrap's JavaScript Plugins) - & gt;
& lt; script src = "https://ajax.googleapis.com/ajax/libs/JQuery/1.11.0/jquery.min.js" & gt; & lt; / script & gt;
& lt;! - Include All Compiled Plugins (Below), OR Include Individual Files As Needed - & GT;
& lt; script src = "bootstrap-3 / js / bootstrap.js" & gt; & lt; / script & gt;
& lt; / body & gt;
Changed the connection of libraries in the welcome.blade.php file:
& lt;! -
& lt; link href = "../../ public / css / app.css" rel = "stylesheet" type = "text / css" & gt;
- & gt;
Answer 1, authority 100%
Check
you have connected! 3 jQuery libraries in the example, all different versions.
laravel’s app.js already contains the minified jQuery library.
bootstrap.js also uses jQuery for its scripts, but as a stand-alone one, and here you need to choose one or app.js from laravel, or bootstrap.js + jQuery.
Answer 2, authority 67%
I faced similar problem too, use inline css and js from laravel, app.js (ajax and bootstrap.js) and app.css (bootstrap.css).