滑塊在jQuery中不起作用

Question

我編寫了一個jQuery代碼，將所有頁面代碼都保存在一個html文件中，我想在左側添加一個滑塊來顯示頁面。 它可以在主頁上運行，但不適用於其他頁面？ 不過，代碼是相似的。 我不知道要更改或添加什么內容才能使所有頁面正常工作。

我的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>

Answer 1

您是否嘗試用jQuery替換$。 或者，您可以在控制台上檢查錯誤。

滑塊在jQuery中不起作用

問題描述

1 個解決方案

解決方案1
1 2015-04-02 10:03:24

滑塊在jQuery中不起作用

問題描述

1 個解決方案

解決方案1 1 2015-04-02 10:03:24

解決方案1
1 2015-04-02 10:03:24