Question

我在使用JQuery项目时遇到了一些麻烦。我有一个包含四个不同列表项的侧边菜单（＆＃34;按类＆＃34;，＆＃34;按周＆＃34;，＆＃34;警报＆＃34;和＆＃34;添加新＆＃34; ）。目前，我点击了任何列表项时发生了幻灯片转换。但是，我只希望当有人点击＆＃34;按类＆＃34;和＃34;按周，＆＃34;因为我打算将其他两个列表项用于不同的功能。我非常感谢你的帮助！

以下是我目前的代码：

<!doctype html> 
<html>
<head>
<meta charset="UTF-8">
<title>navigation template</title>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

var h_bt = 0; //variable to keep track of the div#bottom condition.

    $('a#handler_bottom').on('click', function(event){  

        event.preventDefault();

        if(h_bt == 0){

            //$('div#bottom').animate({top:'600px'}, 300);
            //$('div#top').css({'background-color': 'red'});

            $(this).parent().animate({top:'600px'}, 300);
            $(this).css({'background-color': 'green'});

            h_bt = 1;
        }else{

            $(this).parent().animate({top:'800px'}, 300);
            $(this).css({'background-color': 'gray'});

            h_bt = 0;
        }
    });


    var countContents = $('ul#contents li').length;
    var widthContent = $('ul#contents li').width() + 100;

    // stretch the contents width to contain all the <li> element
    $('ul#contents').width(widthContent*countContents);


    $('#menus li').on('click', function(event){

        event.preventDefault();

        var ind = $(this).index();
        var move = -widthContent*ind +"px";

        $('ul#contents').animate({left: move});

    });

    $('ul#popup').on('click', function(event){
        $('ul#popup').css("background","orange");
        $(this).css("background","red");
        alert("thep ois");
    });




});
</script>

<style type="text/css">
html, body{

    width:100%;
    height:100%;
    margin: 0px;
    padding: 0px;
    background-color: #000;
}


div#container{
    position: relative;
    margin-top: 100px;
    margin-right: auto;
    margin-left: auto;
    width:980px;
    height:635px;
    background-color: blue;
    overflow:hidden; 
}

div#top{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:60px;
    background-color: #fff;
}
div#left{
    position:absolute;
    top:0px;
    left:0px;
    width:165px;
    height:100%;
    background-color: #212338;
}

div#main{
    position:absolute;
    top:60px;
    left:165px;
    width:815px;
    height:700px;
    overflow: hidden;
    background-color: #E8EBF0;
}

div#bottom{
    position:absolute;
    top:800px;
    left:0px;
    width:100%;
    height:200px;
    background-color: green;
}

a#handler_bottom{
    position:absolute; 
    left:375px;
    top:-25px;
    width:50px;
    height:50px;
    border-radius: 50px;
    background-color: #ccc;
}

#menus{
    list-style: none;
    position: absolute;
    top:223px;
    left:-50px;

}

#popup{
    list-style: none;
    position: absolute;
    top:160px;
    left:-50px;

}

#popup2{
    list-style: none;
    position: absolute;
    top:349px;
    left:-50px;

}

ul#popup li, ul#popup2 li{
    width:160px;
    padding:20px;
    margin-bottom: 3px;
    height:20px;
    float:left;
    text-align: center;
    background-color: orange;
}

#hov li:hover, #popup2 li:hover, #menus li:hover{
width:160px;
    padding:20px;
    margin-bottom: 3px;
    height:20px;
    background-color: blue;
    float:left;
    text-align: center; 
}


ul#contents{
    list-style: none;
    margin:0px;
    padding:0px;
}

ul#menus li{
    width:160px;
    padding:20px;
    margin-bottom: 3px;
    height:20px;
    background-color: orange;
    float:left;
    text-align: center;
}

ul#contents{
    position:relative;
    left:0;
}

ul#contents li.content{
    width:715px;
    height:500px;
    margin:25px;
    padding:25px;
    background-color: #E8EBF0;
    float:left;
}

</style>
</head>

<body>
<div id="container">
    <div id="top">

    </div><!--end of div#top--> 

<div id="left">
        <ul id="menus">
            <li id="move"><a href="#">by class</a></li>
            <li id "move"><a href="#">by week</a></li>
            <li><a href="#">alerts</a></li>
            <li><a href="#">add new</a></li>
        </ul>
</ul>

    </div><!--end of div#top--> 
    <div id="main">
        <ul id="contents">
            <li class="content">this view shows by class
                <ul id="list">
                    <li> </li>
                    <li> </li>
                </ul>
            </li>
            <li class="content">this view shows by week
            </li>
        </ul>   
    </div> <!--end of div#main-->

    <div id="bottom">
        <a id="handler_bottom" href="#"></a>
    </div> <!--end of div#bottom-->

</div> <!--end of div#container-->
</body>

Answer 1

首先 - 元素的id必须是唯一的

其次，如果我说得对，只需在你需要的元素中添加一些识别类，然后将这个类作为选择器传递给你的滑动函数，如

HTML

<ul id="menus">
   <li class="move"><a href="#">by class</a></li>
   <li class="move"><a href="#">by week</a></li>
   <li><a href="#">alerts</a></li>
   <li><a href="#">add new</a></li>
</ul>

JS

 $('.move').on('click', function(event){
    event.preventDefault();
    var ind = $(this).index();
    var move = -widthContent*ind +"px";
    $('ul#contents').animate({left: move});

});

JQuery滑块导航问题

1 个答案: