html实现tab页及切换 |
您所在的位置：网站首页 › js中tab栏切换 › html实现tab页及切换 |
html实现tab页及切换
|
效果图如下： tab切换通过js和jquery实现，代码如下（主要是调css样式比较麻烦，其他的都比较简单）： 1、页面切换通过js实现（有点繁琐，每个tab都要写一个onclick方法）： .contentwrap { width: 98%; margin: 0 auto; padding: 10px; } ul { list-style: none; margin: 0; padding-left: 20px; } ul.tab { border-bottom: 1px solid #ccc; padding-bottom:1px; height: 30px; line-height: 30px; color: #696969; } ul.tab li { float: left; font-family: "微软雅黑"; cursor: pointer; padding: 0px; } ul.tab li.li { padding: 0px 25px 0px; font-size: 13px; height: 30px; line-height: 30px; background:#F4F5F9; border-top: 1px solid #C5D0DC; border-left: 1px solid #C5D0DC; border-bottom: 1px solid #C5D0DC; } ul.tab li.current { border-bottom: 0px; border-top: 2px solid #7599DE; font-size: 13px; color: #343434; background:#FFFFFF; } ul.tab li.li:last-child{border-right: 1px solid #C5D0DC;} tab1 tab2 tab3 function toStageInfo() { document.getElementById("li_stage").className="li current"; document.getElementById("li_class").className="li"; document.getElementById("li_photo").className="li"; } function toClaRecordDetail() { document.getElementById("li_stage").className="li"; document.getElementById("li_class").className="li current"; document.getElementById("li_photo").className="li"; } function toTrainPhoto() { document.getElementById("li_stage").className="li"; document.getElementById("li_class").className="li"; document.getElementById("li_photo").className="li current"; }2、页面切换通过jquery实现(用此方法实现时需要自己引入jquery.js，各位在参考是要把这行代码换成自己本地的路径)。 ..... tab1 tab2 tab3 $(function(){ $('#tab > li').on("click",function(){ var num=$(this).index(); //var src=basePath+urlArr[num]; $('#tab > li').each(function(){ if($(this).index()==num){ $(this).attr("class","li current"); }else{ $(this).attr("class","li"); } }); //$('#classify_iframe').attr("src",src); }); });
|
【本文地址】
今日新闻 |
推荐新闻 |