tab多页面切换

最新推荐文章于 2024-05-07 07:58:08 发布

往事不堪回首..

最新推荐文章于 2024-05-07 07:58:08 发布

阅读量1.2k

点赞数

分类专栏：前端集文章标签： html css javascript

原文链接：https://blog.csdn.net/xiaodi520520/article/details/83588527

版权

前端集专栏收录该内容

45 篇文章 1 订阅

订阅专栏

html：

<!DOCTYPE html>
<HTML xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<TITLE>tab页</TITLE>
    <!--jq代码实现过程-->
    <script src="jquery-1.8.2.min.js"></script>
    <!--//引入插件-->
    <script src="tab.js"></script>
    <script>
        $ ( function () {
            $('#wrapper').tabs(
                {
                    tabHeads:'#tab-menu>li',
                    tabHeadsClass:'active',
                    tabBodys:'#tab-main>div',
                    tabBodysClass:'selected'
                }
            )
        } )
    </script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
       /** .wrapper {
            width: 1000px;
            height: 475px;
            margin: 100px auto;居中
        }**/
        .tab-item span {
            /*position: absolute;*/
            width: 1px;
            height: 14px;
            overflow: hidden;
            background: #ddd;
        }
        .tab {
           border:1px solid #ddd;
            /**width: 320px;不限制tab页标题宽度**/
            height: 36px;
        }
        /*把li标签作为父盒子,给li标签设置一个相对定位,给span标签作为子盒子设置绝对定位*/
        .tab li{

            position: relative;
            float:left;
			width: 20%; /**有多少个tab页就自己算好标题的大小**/
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            /**border-top: 4px solid #fff;不要标签的边框**/
        }
        .tab li span{
            position: absolute;
            right: 0;
            top: 10px;
            width: 1px;
            height: 14px;
            overflow: hidden;
            background-color: #ddd;
        }

        /**.products {
            border: 1px solid #ddd;
            width: 1002px;
            height: 476px;
        }**/

        .products .main {
        float: left;
        display: none;
        }
        /*下面这两部是点击后的精髓*/

        .products .main.selected{
            display: block;
			

        }
       .tab li.active {
            /**border-color: red;
            border-bottom: 0;不要边框选中变颜色**/
			background-color: #117fbd;
        }

    </style>
</head>
<body>
<div class="wrapper" id="wrapper">
    <!--导航栏开始-->
    <ul class="tab" id="tab-menu"> <!--第一页div默认添加active选中样式-->
        <li class="tab-item active">第1页 
            <span></span>
        </li>   <!--如果某个标签页需要加载就去调用获取什么数据，千万不要用onload，会无效，直接在li标签里面使用onclick="" -->
        <li class="tab-item" >第2页
            <span></span>
        </li>
        <li class="tab-item">第3页
            <span></span>
        </li>
        <li class="tab-item">第4页

        </li>
    </ul>
    <!--导航栏结束-->
    <!--主体开始-->
    <div class="products" id="tab-main">    <!--如果多tab页有id冲突，可以使用iframe引入，但iframe引入又很大可能导致很多触发事件失效-->
        <!--一个#的a标签默认会跳转到当前页的首部,如果想阻止a标签跳转,又不希望跳转到首页,可以使用<a href="###"></a>-->
        <div class="main selected"><!--如果iframe显示不能全屏那么就给当前div设置宽度100%-->
			<iframe src="/toReceive" id="iframe_a"></iframe>  
        </div>
        <div class="main">
			2222222222222222222222222222222222222222222222222222222222222222
        </div>
        <div class="main">
          3333333333333333333333333333333333333
        </div>
        <div class="main">
			444444444444444444444444444444
        </div>
    </div>
    <!--主体结束-->

</div>
</body>
</html>

tab. js：


(function ($) {
    //给$的fn添加方法
    $.fn.tabs=function ( options ) {
        /*     {
                        tabHeads:'tab-menu>li',
                        tabHeadsClass:'active',
                        tabBodys:'tab-main>div',
                        tabBodysClass:'selected'
                    }
        */
        /**
         * @param options 对象
         * @param options.tabHeads:上面的li标签
         * @param options.tabHeadsClass:li标签需要添加的类名
         * @param options.tabBodys:下面四个内容盒子
         * @param options.tabBodysClass:下面四个内容盒子需要添加的类名
         */
            //将fn这个对象存起来,代码结束的时候让它返回
        var $bigDiv=this;
        //1.给页签们添加点击事件
        $(options.tabHeads).on('click',function (  ) {

            //2.给被点击的li标签添加类,给其它兄弟标签移除这个类
            $(this).addClass(options.tabHeadsClass).siblings().removeClass(options.tabHeadsClass);
            //3.获取当前点击的标签的索引
            var idx=$(this).index();
            //4.从下面div里面找到和idx相同的索引,给它添加类,其它兄弟页面移除这个类
            $(options.tabBodys).eq(idx).addClass(options.tabBodysClass).siblings().removeClass(options.tabBodysClass)
        })


        return $bigDiv;

    }
}(jQuery))

js作者：案例:tab栏切换插件_庚中-CSDN博客_tab栏切换

往事不堪回首..

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
tab多页面切换

html：<!DOCTYPE html><HTML xmlns:th="http://www.thymeleaf.org"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <TITLE>tab页</TITLE>  <script src="jq..
复制链接

扫一扫

专栏目录