JQuery滑塊導航問題

我在處理JQuery項目時遇到了一些問題。我有一個包含四個不同列表項（「按班」，「按周」，「警報」和「添加新」）的側面菜單。目前，當點擊任何列表項目時，我都會發生幻燈片切換。不過，我只希望在有人點擊「按課程」和「按周」時發生這種轉變，因爲我打算將其他兩個列表項用於不同的功能。我真的很感謝你的幫助！JQuery滑塊導航問題

下面是我當前的代碼：

<!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>

來源

2014-10-27 Kelsey Hisek

首先的 - 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>

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

});

來源

2014-10-27 17:08:38

非常感謝！這正是我想要弄清楚的。 – 2014-10-27 17:43:21

@凱西海斯克您好。不要忘記接受答案;） – 2014-10-27 17:55:38

JQuery滑塊導航問題

回答

相關問題