0
お読みいただきありがとうございます。ナビゲーショントグルスクリプトはページ固有のスクリプトと互換性がありません
これらの2つのスクリプトの間に何か矛盾があります。私が下のHTMLでページに着くと、私はもはやナビゲーションを使って私のサイトのページを切り替えることができなくなりました。この機能は、サイト内の各ページによって読み込まれる最初のスクリプトによって有効になります。 2番目のスクリプトは、このページに固有のものです。
誰でもこれを調べて、お互いに互換性がない理由を理解できますか？ この問題を解決するための提案も素晴らしいでしょう。あなたは素晴らしいです。ありがとうございました！
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;
}
セレクタとして$（ 'li'）を使用するのではなく、私は単に$（ '＃upper'）のようなidを使ってみてください。 – RyeGuy
IDの代わりにクラスをキーイングしているのであれば、 '.upper'になります。私はそれが実際にそれを必要とするクリック可能な項目にのみ接続することを確認するために '.upper li'のようなもっと複雑なセレクタを使用したいと思います。 – Martin
恐ろしい私はそれを行こう。ありがとうございました！ – RyeGuy