手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> JS >> CSS+JS标签切换效果

CSS+JS标签切换效果

24820 JS | 2015-5-12

类似淘宝首页右侧的标签切换效果。

效果如下:

QQ截图20150513163543.jpg


HTML代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Tab切换</title>
    <link type="text/css" rel="stylesheet" href="index.css">
    <script src="index.js"></script>
</head>
<body>
    <div  id="tab">
        <div id = "tab-title">
            <ul>
                <li>
                    <a href="#">公告</a>
                </li>
                <li>
                    <a href="#">规则</a>
                </li>
                <li>
                    <a href="#">论坛</a>
                </li>
                <li>
                    <a href="#">安全</a>
                </li>
                <li>
                    <a href="#">公益</a>
                </li>
            </ul>
        </div>
        <div id="tab-content">
            <div style="display: block">
                <ul>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                    <li>
                        <a href="#">八千家4S店参与双11</a>
                    </li>
                </ul>
            </div>
            <div  style="display: none">
                <ul>
                    <li>
                        <a href="#">谨防假冒客服诱导退款</a>
                    </li>
                    <li>
                        <a href="#">谨防假冒客服诱导退款</a>
                    </li>
                    <li>
                        <a href="#">谨防假冒客服诱导退款</a>
                    </li>
                    <li>
                        <a href="#">谨防假冒客服诱导退款</a>
                    </li>
                </ul>
            </div>
            <div style="display: none">
                <ul>
                    <li>
                        <a href="#">阿里云运营智慧城市</a>
                    </li>
                    <li>
                        <a href="#">阿里云运营智慧城市</a>
                    </li>
                    <li>
                        <a href="#">阿里云运营智慧城市</a>
                    </li>
                    <li>
                        <a href="#">阿里云运营智慧城市</a>
                    </li>
                </ul>
            </div>
            <div style="display: none">
                <ul>
                    <li>
                        <a href="#">故宫创意产品来袭啦</a>
                    </li>
                    <li>
                        <a href="#">故宫创意产品来袭啦</a>
                    </li>
                    <li>
                        <a href="#">故宫创意产品来袭啦</a>
                    </li>
                    <li>
                        <a href="#">故宫创意产品来袭啦</a>
                    </li>
                </ul>
            </div>
            <div style="display: none">
                <ul>
                    <li>
                        <a href="#">阿里发布 YunOS 3.0</a>
                    </li>
                    <li>
                        <a href="#">阿里发布 YunOS 3.0</a>
                    </li>
                    <li>
                        <a href="#">阿里发布 YunOS 3.0</a>
                    </li>
                    <li>
                        <a href="#">阿里发布 YunOS 3.0</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>


JS代码如下:

/** 如果你使用了JQuery,那下面这段话应该去掉 */
function $(id){
    return typeof  id=="string"?document.getElementById(id):id;
}
/** 页面加载时就执行 */
window.onload = function(){
    var titleName = $("tab-title").getElementsByTagName("li");
    var tabContent = $("tab-content").getElementsByTagName("div");
	// 一个标题对应一个内容区域,所以这里肯定是相同的
    if(titleName.length != tabContent.length){
        return;
    }
    for(var i = 0;i<titleName.length;i++){
        titleName[i].id = i;
        titleName[i].onmouseover = function(){
			// 先把所有标题样式设置为空
            for(var j = 0;j<titleName.length;j++){
                titleName[j].className = "";
                tabContent[j].style.display = "none"
            }
			// 再把当前选择的标题的样式设置为选择
            this.className = "select";
            tabContent[this.id].style.display = "block";
        }
    }
}


CSS代码如下:

*{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}

.tab{
    width: 298px;
    height: 98px;
    margin: 10px;
    border: 1px solid #eee;
    overflow: hidden;
}

.tab-title{
    height: 27px;
    position: relative;
    background: #f7f7f7;
}

.tab-title ul{
    position: absolute;
    width: 301px;
    left: -1;
}
.tab-title li{
    float: left;
    width: 58px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    padding: 0 1px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.tab li a:link,.tab li a:visited{
    text-decoration: none;
    color: #000;
}
.tab li a:hover{
    color:#f90;
    font-weight: 700;
}

.tab-title li.select{
    background: #fff;
    border-bottom-color: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 0;
}

.tab .tab-content .tabct{
    margin: 10px 10px 10px 19px;
}

.tab .tab-content .tabct ul li{
    float: left;
    width: 134px;
    height: 25px;
    overflow: hidden;
}


下载三个文件:

index.zip


推荐您阅读更多有关于“ css 标签切换 ”的文章

上一篇:HTMl5改良与增加 input 元素的种类 下一篇:JDBC读写大数据字段示例

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 也许大家都已经注意到了,今年的房价,好多地方都是翻了一番,跟着就是,各地房东开始变相涨租。今年之所以搬走,就是为此,这两天同学也是如此。很多房东只认钱,别谈感情,伤钱。而对于这个城市来说,你怎么定位自己,你真把自己当成她的一份子?你来此为何?将来何去何从?自己掂量清楚。

    2016-12-05 10:03

  • 为什么一直不写了呢?因为当爸爸了,没空了。今年的冬天,有些寒冷,除了这寒冬带来的不适,更有因乐视公司遇到危机,而带来的同事别离。送别同事,看着空旷的工位,心中有些悲凉。临近年关,此时此刻,该怎么做,似乎不再是脑子一热那么简单了。

    2016-11-24 11:28

  • 已经请假,加上国庆,要很长一段时间不在北京了。919加班,搞的现在有点心累,胸闷,身体不适。看来,我要好好休息一下了。这几天有些冷,2016的冬天,一步步来了,各位亲友,记得添衣加粗啊。

    2016-09-23 17:29

  • 更多»

最新文章
热门文章
随机文章