Question

感谢您花时间阅读本文。

这两个脚本之间存在冲突。当我到达下面带有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;
 }

Answer 1

你是否尝试过更具体的第二个脚本＆＃39; $（＆＃39; li＆＃39;）。点击（function（e）{...选择器？这将附加一个新的点击功能到导航栏，我不认为这是有意的。

导航切换脚本与页面特定脚本不兼容

1 个答案: