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替换$。或者你可以在控制台上查看错误。

Slider不能在jQuery中运行

1 个答案: