附加上一个和下一个按钮

时间:2014-01-29 18:44:05

标签: javascript jquery html css

尝试在我的网站上添加PREVIOUS / NEXT功能。单击下一个按钮时,我希望当前选项卡移动到它旁边的右侧。

<div class="nav">
        <div id="prev" class="previous" style="display:none">
            <a href="#">Prvious</a>
        </div>
        <div id="prevempty">
        </div>
        <div id="crumbs">
            <ul>
                <li id="li1" class="current"><a href="#1" class="first" value="one" onclick="MenuFunction(1);">One</a></li>
                <li id="li2"><a id="li2A" href="#2" value="two" onclick="MenuFunction(2);">Two</a></li>
                <li id="li3"><a href="#3" value="three" onclick="MenuFunction(3);">Three</a></li>
                <li id="li4"><a href="#4" value="four" onclick="MenuFunction(4);">Four</a></li>
                <li id="li5"><a href="#5" value="five" onclick="MenuFunction(5);">Five</a></li>
            </ul>
        </div>
        <div id="nxt" class="next">
            <a href="#">Next</a>
        </div>
    </div>

1 个答案:

答案 0 :(得分:1)

   $(document).ready(function(){
      $("#nxt").click(function(){
        $("#prev").show(); 
            $(".current").next().addClass("current").end().removeClass("current"); 
           if($(".current").attr("id") == "li5")
           {
             $("#nxt").hide();
           }
      });

    $("#prev").click(function(){
     $("#nxt").show();
     $(".current").prev().addClass("current").end().removeClass("current"); 
     if($(".current").attr("id") == "li1")
     {
        $("#prev").hide();
     }
   });
});