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

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

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

---

目录

效果图

---

注：需要导入jquery库

---

实现原理：

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

---

html 代码

<ul class="tabs">
    <li>
        <a href="javascript:void(0);">1</a>
        <div class="content">1</div>
    </li>
    <li>
        <a href="javascript:void(0);">2</a>
        <div class="content">2</div>
    </li>
    <li>
        <a href="javascript:void(0);">3</a>
        <div class="content">3</div>
    </li>
</ul>

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标签库

<script src="jquery.js"></script>

$(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();
}

源码下载

文章最后附上源代码

• 下载地址

以往博客地址

• 博客地址