滑塊不在jQuery中工作

我寫了一個jQuery代碼，它將所有頁面代碼放在一個html文件中，我想在左側添加一個滑塊來顯示頁面。它在主頁上工作，但它不適用於其他頁面？儘管如此，代碼是相似的。我不知道要修改或添加哪些內容以適合所有頁面。滑塊不在jQuery中工作

我的HTML頭：

<head> 
<meta charset="utf-8"> 
<title>WELCOME</title> 
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script> 
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script> 
<link rel="stylesheet" href="css/jquery.sidr.dark.css"> 
<script> 
$(document).ready(function(){ 
     {$(".p1").hide()}; 
    $("#hide1").click(function(){ 
     $(".p1").hide(); 
    }); 
    $("#show1").click(function(){ 
     $(".p1").show(); 
    }); 
}); 
</script> 

<script> 
$(document).ready(function(){ 
     {$(".p2").hide()}; 
    $("#hide2").click(function(){ 
     $(".p2").hide(); 
    }); 
    $("#show2").click(function(){ 
     $(".p2").show(); 
    }); 
}); 
</script> 

<script> 
$(document).ready(function(){ 
     {$(".p3").hide()}; 
    $("#hide3").click(function(){ 
     $(".p3").hide(); 
    }); 
    $("#show3").click(function(){ 
     $(".p3").show(); 
    }); 
}); 
</script> 

<script> 
    $(document).ready(function() { 
    $('#simple-menu1').sidr(); 
}); 
</script> 

<script> 
    $(document).ready(function() { 
    $('#simple-menu2').sidr(); 
}); 
</script> 



<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="css/mobile.css" /> 
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> 

</head>

這裏是主頁滑塊（正常工作的那個）：

<!-- Home Page --> 
<div data-role="page" id="page"> 
    <!-- Header --> 
    <div data-role="header"> 
     <div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div> 
     <div id="sidr"> 
      <!-- Your content --> 
      <ul class="center my-font"> 
       <li> 
        <a href="#page2" class="header-list">Page 1</a> 
       </li> 
       <li class="active"> 
        <a href="#page3" class="header-list">Page 2</a> 
       </li> 
       <li> 
        <a href="#page4" class="header-list">Page 3</a> 
       </li> 
      </ul> 
     </div> 
     <h1 class="my-font"> Welcome to the home page</h1> 
    </div>

這裏爲滑塊的頁面的一個代碼（它沒有工作）：

<!-- Page (2) --> 
<div data-role="page" id="page"> 
    <!-- Header --> 
    <div data-role="header"> 
     <div id="s-image"><a id="simple-menu1" href="#sidr"><img class="header-image" src="images/sort.png" alt="Sort By" heigh="35" width="35"></a> </div> 
     <div id="sidr"> 
      <!-- Your content --> 
      <ul class="center my-font"> 
       <li> 
        <a href="#page2" class="header-list">Page 1</a> 
       </li> 
       <li class="active"> 
        <a href="#" class="header-list">Page 2</a> 
       </li> 
       <li> 
        <a href="#page4" class="header-list">Page 3</a> 
       </li> 
      </ul> 
     </div> 
     <h1 class="my-font"> Welcome to the home page</h1> 
    </div>

來源

2015-04-02 Final Project

你在控制檯有什麼錯誤？ – 2015-04-02 10:03:41

你確定你在其他頁面中添加了jQuery滑塊插件嗎？ – 2015-04-02 10:04:40

錯誤在於滑塊在其他頁面上不起作用。在另一個頁面中添加jQuery意味着什麼？ – 2015-04-02 10:23:58

你有沒有嘗試用jQuery替換$。或者你可以檢查控制檯上的錯誤。

來源

2015-04-02 10:03:24

滑塊不在jQuery中工作

回答

相關問題