实现table切换

 

http://down.admin5.com/info/2015/1211/130283.html

引入jquery

<script type="text/javascript">
$(function(){
$('.tabPanel ul li').hover(function(){
$(this).addClass('hit').siblings().removeClass('hit');//将同辈元素移除hit class属性
$('.panes>div:eq('+$(this).index()+')').show().siblings().hide(); //经过的显示 不经过的隐藏
})
})

实现自动table切换+定时器：

<script type="text/javascript">
        $(document).ready(function(){
            var slideShow=$(".slideShow"), //获取最外层框架的名称
            ul=slideShow.find("ul"),
            showNumber=slideShow.find(".showNav span"),//获取按钮
            oneWidth=slideShow.find("ul li").eq(0).width();
            var time=null;//定时器返回值，主要用于关闭定时器
            var iNow=0;//iNow是正在展示图片的检索值
            $('.showNav span').click(function(){ //为每个按钮绑定一个点击事件
            $(this).addClass("active").siblings().removeClass("active"); //按钮被点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
            var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值        
            iNow=index;
            ul.animate({
            "left":-oneWidth*index, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
            })
            })
            timer=setInterval(function(){
                iNow++;
                if(iNow>showNumber.length-1){
                    iNow=0;
                }
                showNumber.eq(iNow).trigger("click");//模拟触发数字按钮的click
            },20000)//轮播时间
        })
    </script>