#javascript #jquery #html
#javascript #jquery #HTML
Вопрос:
Я ценю, что вы нашли время, чтобы прочитать это.
Что-то конфликтует между этими двумя сценариями. Когда я перехожу на страницу с HTML ниже, я больше не могу переключаться между страницами на моем сайте с помощью навигации. Эта функция включена первым скриптом, который загружается каждой страницей на моем сайте. Второй скрипт уникален для этой страницы.
Может кто-нибудь изучить это и выяснить, почему они несовместимы друг с другом? Любые предложения по устранению этой проблемы также были бы замечательными. Ты потрясающий. Спасибо!
HTML
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Stretch</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class=""><a href="http://URL.net/AppPt1(revised).html">Stretch Producer</a></li>
<li class=""><a href="#science">Science</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Begin page content -->
<section id="content">
<div id="container">
<div id="stretch-app">
<div class=" col-xs-12 col-sm-6 col-md-6 col-lg-6" id="button-list">
<ul id="stretch-nav">
<li id="header1" class="inactive">
<h2>Upper Body</h2></li>
<li id="front-neck" class="upper">Front Neck</li>
<li id="abdomen" class="upper">Abdomen</li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="anatomy-container">
<img id="anatomy" class="front-neck" src="http://URL/photos/NAME.png" />
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6" id="list-container">
<ul id="container">
</ul>
</div>
</div>
</div>
</section>
</body>
JS-скрипт 1
$('nav a').on('click', function(e) { // User clicks nav link
e.preventDefault(); // Stop loading new link
var url = this.href; // Get value of href
$('nav a.current').removeClass('current'); // Clear current indicator
$(this).addClass('current'); // New current indicator
$('#container').remove(); // Remove old content
$('#content').load(url ' #container').hide().fadeIn('slow'); // New content
});
JS скрипт 2
$(document).ready(function() {
$("li.upper").hide();
//Enables slide toggle by clicking header button and maintains color while active
$("#header1").on('click', function() {
$("li.upper").slideToggle();
var buttonState = $("li#header1").attr("class");
if (buttonState == "inactive") {
$("li#header1").removeClass("inactive");
$("li#header1").addClass("active");
$(this).css({
"background": "#4CAF50",
"color": "white"
});
} else {
$("li#header1").removeClass("active");
$("li#header1").addClass("inactive");
$(this).css({
"background": "white",
"color": "black"
});
}
});
//Maintain button color after being clicked
$("li.upper").on("click", function() {
var buttonState = $(this).attr("class");
if (buttonState == "upper inactive") {
$(this).removeClass("upper inactive");
$(this).addClass("upper active");
$(this).css({
"background": "#008CBA",
"color": "white"
});
} else {
$(this).removeClass("upper active");
$(this).addClass("upper inactive");
$(this).css({
"background": "white",
"color": "black"
});
}
});
//Allows the pictures of the highlighted human anatomy to appear
$("#button-list li").on("click", function() {
imgClass = $(this).attr('id');
$("#anatomy-container img").hide(); // hide all images
$("#anatomy-container ." imgClass).show(); //show only image that class match with button id
});
$("#button-list li").on("mouseover", function() {
imgClass = $(this).attr('id');
$("#anatomy-container img").hide(); // hide all images
$("#anatomy-container ." imgClass).show(); //show only image that class match with button id
});
//Updates content of <ul> container with stretches
var myData = jsonString;
var newContent = '';
var selected = null;
$('li').click(function(e) {
e.preventDefault();
selected = $(this).attr("id");
newContent = "";
/** Perhaps a quite different json structure could remove the for loop **/
for (var i = 0; i < myData.stretches.length; i ) {
if (selected == myData.stretches[i].area) {
newContent = '<li id = "' selected '-img" class = "' myData.stretches[i].area '">';
newContent = '<a href="' myData.stretches[i].ref '">'; /** ref is not defined in JSON **/
newContent = '<img id="stretch-image" src="' myData.stretches[i].pic '">';
//newContent = '<p "' responseObject.stretches[i].name '">';
newContent = '</a> </li>';
}
}
console.log(newContent);
$('#container').html(newContent);
});
});
CSS
body {
padding-top: 80px;
text-align: center;
font-family: monaco, monospace;
}
h1 {
font-size: 30px
}
h2 {
font-size: 20px;
}
ul {
list-style-type: none;
}
#header1,
#header2 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
margin: 0 0 10px 0;
}
#header1:hover,
#header2:hover,
#header1:active,
#header2:active {
background-color: #4CAF50;
color: white;
}
#stretch-app{
position: relative;
border: 2px solid black;
height:880px;
width: auto;
}
.upper,
.lower {
background-color: white;
color: black;
border: 2px solid #008CBA;
margin: 0 0 10px 0;
padding: 10px 5px;
}
.upper:hover,
.lower:hover {
background-color: #008CBA;
color: white;
}
#button-list {
position: absolute;
}
#stretch-nav{
width: 300px;
right: 500px;
}
#highlight {
height: 500px;
width: 500px;
}
#anatomy-container {
border: 2px solid black;
padding: 10px;
height: 350px;
width: 300px;
position: absolute;
float: none;
left: 350px;
bottom: 490px;
}
#anatomy {
height: 350px;
width: 300px;
}
#list-container {
border: 2px solid black;
padding: 10px;
height: 450px;
width: 300px;
float: none;
position: absolute;
left: 350px;
top: 400px;
overflow: auto;
}
#stretch-image{
position: relative;
right: 40px;
height: 300px;
width: 300px;
}
Ответ №1:
Вы пробовали быть более конкретным во втором скрипте $(‘li’).click(function(e) {… селектор? Это приведет к добавлению новой функции щелчка к панели навигации, и я не думаю, что это было задумано.
Комментарии:
1. Итак, что вы говорите, вместо того, чтобы использовать $(‘li’) в качестве селектора, я должен просто попробовать использовать идентификатор, такой как $(‘#upper’)?
2. Это было бы ‘.upper’, если вы вводите класс вместо идентификатора, но да. Я бы использовал более сложный селектор, такой как ‘.upper li’, чтобы убедиться, что он привязан только к тем интерактивным элементам, которые мне действительно нужны.
3. Потрясающе, я попробую. Спасибо!