正文  软件开发 > html5 >

前端实用功能:选项卡切换,前端实用选项卡切换

前端实用功能:选项卡切换,前端实用选项卡切换工作过程中,遇到很多特别常用的小功能,但是写起来又比较费劲,于是一点一点整理出了一些使用频率较高的小功能,这里分享源码,希望对大家有帮助! 选项卡切换...

前端实用功能:选项卡切换,前端实用选项卡切换

工作过程中,遇到很多特别常用的小功能,但是写起来又比较费劲,于是一点一点整理出了一些使用频率较高的小功能,这里分享源码,希望对大家有帮助!

选项卡切换


这个功能主要还是由display:block 与 display:none之间通过点击选项卡切换完成的

html代码

      <div>
            <ul id="hear"><!--选项卡列表,如果是底部选项卡,将hear  fixed到底部,侧边栏重新设置css-->
                <li class="action" style="color: #FF4200;border-bottom: 1px solid #FF4200;"><!--带action的会默认选中-->
                    第一页选项
                </li>
                <li>
                    第二页选项
                </li>
                <li>
                    第三页选项
                </li>
            </ul>
            <ul id="content">   <!--选项卡内容列表--> 
                <li class="action" id="content1"><!--带action的会默认显示-->
                    第一页内容
                </li>
                <li id="content2">
                    第二页内容
                </li>
                <li id="content3">
                    第三页内容
                </li>
            </ul>

        </div>

这是包含选项卡所有内容的整体的div,选项卡的标题写在第一个ul(#hear)中,每个选项卡的内容写在第二个ul(#content)中,不一定必须是ul,总体格式是这样就可以,选项卡的标题数目与选项卡的内容数目应对应相等,可以凭自己需要一起添加删减。

CSS代码

       * {
                margin: 0px;
                padding: 0px;
            }
            ul {
                list-style: none;
            }
            #hear{
                height: 50px;
                width: 400px;
                text-align: center;
                line-height: 50px;
            }
            #hear li {        /*第几个选项卡的样式,有几个选项卡就有几个*/
                width: 33.33%;
                float: left;
            }
            #content{
                margin-top: 30px;
            }
            #content li {                    /*让所有内容页隐藏*/
                display: none;
                width: 400px;
                border: 5px solid red;
                height: 200px;
            }
            
            #content .action {           /*让选中的内容页显示*/
                display: block;
            }

根据自己的需求设计合适的css样式,需要注意的一点是,需要显示的内容添加一个组名.action,让其display:block;其他的内容区全部隐藏。与需要显示内容的content对应的选项卡标题也要设置一个action组,上面的HTML代码中已经给出了第一个选项卡与第一个内容的action组,并且给选项卡名称所在的li添加了不同的样式

那么这就是我的选项卡的样式

JS代码

          $("#hear li").click(function() {       /*----------------选项卡的点击事件,移动端用tap-----------------*/
                    $(this).css({/*选中选项卡的样式*/
                        color: "#ff4200",
                        borderBottom: "1px solid #ff4200"

                    }).siblings().css({/*未选中选项卡的样式*/
                        color: "#000000",
                        borderBottom: "none"
                    });
                });

                $("#hear li").click(function() { /*----------------选项卡的点击事件,移动端用tap-----------------*/
                    $(this).addClass("action").siblings().removeClass("action");/*选中的li添加action类,其他的移除*/
                    var index = $(this).index();/*定义索引数值*/
                    $("#content li").eq(index).css("display", "block").siblings().css("display", "none");/*相对应的第几个内容区显示,其他的隐藏*/
                });

js代码是使用jQuery写的,可以直接在上方的代码中修改想要的点击切换样式

下面的方法是点击时给点击的选项卡和相对应的选项卡内容添加action类,其他的兄弟元素移除action类,这样就做到了切换效果

好啦这次的分享就到这里啦,下次我会继续分享常用的小功能

我是Lnova,如果您有好的意见建议,请快快告诉我哦~

http://www.bkjia.com/HTML5/1226690.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/1226690.htmlTechArticle前端实用功能:选项卡切换,前端实用选项卡切换 工作过程中,遇到很多特别常用的小功能,但是写起来又比较费劲,于是一点一点整理出...