最简单的css+js标签页效果制作

系统管理员 2022-06-17 03:59 266阅读 0赞

# 最简单的css+js标签页效果制作 #

> 之前见网上的标签页虽然效果很好，但是额外的代码太多，让人分不清写一个标签页究竟需要什么，所以我来写一个最简单的,其他效果你们可以自己按喜好添加。

--------------------

**目录**

*  最简单的cssjs标签页效果制作
    
     *   *  效果图
         *  实现原理
         *  html 代码
         *  css代码
         *  js 代码
         *  源码下载
         *  以往博客地址

### 效果图 ###

![完成后的样子][SouthEast]

--------------------

**注：需要导入jquery库**

--------------------

### 实现原理： ###

> 让标签页都固定在一个位置（标签按钮下面）通过控制 display:none; 和 display: block; 来显示当前标签页(jquery的hide()和show()函数也是同样的原理)

--------------------

### html 代码 ###

a 的 href 属性是javascript:void(0);是为了取消a标签自动跳转

--------------------

### css代码 ###

/* 首先取消默认样式 */
    ul { list-style-type: none;}
    ul, li { margin:0; padding: 0; }
    
    /* 让标签页并排显示 */
    .tabs>li { float: left; width: 100%; }
    
    .tabs { position: relative; /* position:absolute; 的绝对定位是相对于属性是relative的父级元素定位的 */ width: 600px; height: 400px; /* position设为relative后就不参与正经元素的排列了，所以要设置固定长宽免得被下面的元素覆盖 */ }
    
    /* 给标签按钮加点颜色 */
    .tabs>li>a { display: inline-block; width: 50px; height: 30px; background-color: #CCC; text-align: center; line-height: 30px; border: solid 1px; text-decoration: none; }
    
    /* 当前标签页的样式 */
    .current { background-color: #ddd; color: #FFF; }
    /* 让标签页内容固定位置显示 */
    .tabs>li>.content { position: absolute; left: 0; /* 靠左显示 */ width: 600px; height: 370px; background-color: #dcdcdc; font-size: 200px; text-align: center; line-height: 370px; }

--------------------

### js 代码 ###

**导入js标签库**

$(document).ready(function(){   // 在页面加载时的动作
        hideAllTagContent();    
        $(".tabs>li>a").click(function() {  // 给标签页按钮绑定点击事件
            switchTab(this);    // 将调用函数的当前标签作为参数传进去
        });
    });
    function switchTab(obj) { 
        var content = $(obj).siblings(".content"); // 找到a标签的兄弟标签
        var $contents = $(obj).parent().parent().find(".content");
    
            // 移除所有标签按钮的current样式，给当前标签页添加上current样式
        $(obj).parent().parent().children("li").children("a").removeClass("current");
        $(obj).addClass("current");
    
        // 让所有内容页隐藏， 显示当前内容页
        $contents.hide();
        $(content).show();
    }
    // 在载入页面时隐藏所有其他标签页
    function hideAllTagContent() { 
        $(".tabs>li>.content").hide();
        $("a.current+.content").show();
    }

### 源码下载 ###

文章最后附上源代码

*  [下载地址][Link 1]

### 以往博客地址 ###

*  [博客地址][Link 2]

[SouthEast]: /images/20220617/f2a0b53f184b40de805d34fc3694c126.png
[Link 1]: http://download.csdn.net/detail/tom9238/9815484
[Link 2]: http://blog.csdn.net/tom9238