導航切換腳本不與頁面的特定腳本

東西是這兩個腳本之間的衝突。當我到達下面的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; 
}

來源

2016-09-30 RyeGuy

你是否嘗試過在第二個腳本的$（'li'）中更具體一些。click（function（e）{... selector？這將附加一個新的點擊功能的導航欄，我不認爲這是有意的。

來源

2016-09-30 21:30:25 Martin

所以你說什麼，而不是使用$（'li'）作爲選擇器我應該簡單地嘗試使用諸如$（'＃upper'）之類的ID？ – RyeGuy

如果你正在關閉一個班級而不是ID，那會是'.upper'，但是。不過，我會使用更復雜的選擇器，比如'.upper li'，以確保它僅附加到我實際需要的可點擊項目上。 – Martin

真棒，我會給它一個去。謝謝！ – RyeGuy

導航切換腳本不與頁面的特定腳本

回答

相關問題