简洁的CSS滑动门效果,也就是TAB标签切换效果

zoukankan html css js c++ java

简洁的CSS滑动门效果,也就是TAB标签切换效果
滑动门效果 - by koyoz
首页

新闻

博客

图片

播客
我是首页

我是新闻

我是博客

我是图片

我是播客

今天写了一个简单的CSS滑动门效果,也就是TAB标签切换效果了.

这个效果能兼容 IE6+, FireFox 2+, Opera8+ 等主流浏览器.

说到兼容,还特别为 Opera 额外加了句兼容的代码, 这里介绍一下:
CSS代码

@media all and (min-width: 0px){/* 自己添加的css样式 */}

/* 例如: */

@media all and (min-width: 0px){#title{height:23px;}}
以下是所有实现的代码:
XML/HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>滑动门效果 - by koyoz</title>

<style type="text/css">

body {font-size:12px;font-family:Verdana;}

/* 滑动门定义 */

#title{height:24px; *height:23px; 400px; border-bottom:1px solid #ccc;}

@media all and (min- 0px){#title{height:23px;}}

#title ul{list-style:none;margin:0px 10px; padding:0px; *position:absolute}

#title ul li {float:left;margin-left:5px;}

#title ul li a{border:1px solid #ccc;padding:4px 10px !important;padding:5px 10px 3px 10px;display:block;text-decoration:none;color:blue;}

#title ul li a:hover,#title ul li a.over {border-bottom:1px solid #fff;}

/* 内容 */

#content {padding:5px 10px;}

#content div{display:none;}

</style>



</head>



<body>

<div id="title">

    <ul>

        <li><a href="javascript://" onmouseover="show(0)" class="over">首页</a></li>

        <li><a href="javascript://" onmouseover="show(1)">新闻</a></li>

        <li><a href="javascript://" onmouseover="show(2)">博客</a></li>

        <li><a href="javascript://" onmouseover="show(3)">图片</a></li>

        <li><a href="javascript://" onmouseover="show(4)">播客</a></li>

    </ul>



</div>



<div id="content">

    <div style="display:block">我是首页</div>

    <div>我是新闻</div>

    <div>我是博客</div>

    <div>我是图片</div>

    <div>我是播客</div>

</div>



<script type="text/javascript">

function show(n)

{

    var o = document.getElementById('title').getElementsByTagName("a");

    var c = document.getElementById('content').getElementsByTagName("div");

    for(i = 0; l = o.length, i < l; o[i].className = '',c[i].style.display = 'none',i++ );

    o[n].className = 'over';

    c[n].style.display = 'block';

}

</script>

</body>



</html>
怎么样? 还算简洁吧.

可以把onmouseover改成onclick事件,即可以实现点击切换的效果.
aliyun活动 https://www.aliyun.com/acts/limit-buy?userCode=re2o7acl
查看全文

相关阅读:
手把手的教你激活PyCharm --Pycharm激活详细教程（二）（非常详细，非常实用）
api-ms-win-crt-process-l1-1-0.dll 丢失的处理，遇到问题和完美解决
 关于pycharm安装出现的interpreter field is empty，无法创建项目存储位置
 手把手的教你安装PyCharm --Pycharm安装详细教程（一）（非常详细，非常实用）
谷歌浏览器的各种插件网址Chrome插件（谷歌浏览器）-超级详细
 selenium之 chromedriver与chrome版本映射表（更新至v2.43）
火狐l浏览器所有版本
 1、MySQL主从同步机制及同步中的问题处理
 PyCharm证书过期：Your license has expired
Git的使用--如何将本地项目上传到Github（三种简单、方便的方法）（二）（详解）

原文地址：https://www.cnblogs.com/wangbin/p/1707984.html