<!DOCTYPE HTML> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> ul.nav{overflow: hidden;padding: 0;} ul li{list-style: none;float: left;width: 30px;padding: 5px;background: silver;cursor: pointer;margin-right: 10px;text-align: center;} .context{clear: both;width: 800px;overflow: hidden;position: absolute;} .context>div{width: 162px;padding:18px;border: solid 1px #ccc;float: left;overflow: hidden;} .active{color: yellow;} #content-wrap{width: 200px;overflow: hidden;position: relative;height: 58px;} body{position: static;} .icon{position: absolute;top:116px;} .icon .md1{color: #999;display: block;border-color: #ccc transparent transparent transparent;border-width: 18px;border-style: solid;width: 0;height: 0;} .icon .md2{color: #999;display: block;border-color: #fff transparent transparent transparent;border-width: 18px;border-style: solid;width: 0;height: 0;margin-top: -37px;} </style> </head> <body> <ul class="nav"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <div id="content-wrap"> <div class="context"> <div>this is demo1</div> <div>this is demo2</div> <div>this is demo3</div> <div>this is demo4</div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $(".nav li").click(function(event){ if($(this).hasClass('active')){ return false; } $(".nav li.active").removeClass("active"); $(this).addClass("active"); var index=$(this).index(".nav li"); var offset=index*-200; $(".context").animate({left:offset},540) }) }) </script> <div class="icon"> <span class="md1"></span> <span class="md2"></span> </div> </body> </html>