1.鼠标移入移出切换
tab切换 * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto; width: 400px; height: 200px; border: 1px solid #f70; overflow: hidden; } .tabbox .tab-tit{ position: relative; height: 40px; } ul { position: absolute; left: -1px; width: 401px; height: 40px; line-height: 40px; background-color: #eaeaea; } ul li { float: left; border-left: 1px solid #f70; border-bottom: 1px solid #f70; text-align: center; width: 99px; height: 40px; overflow: hidden; } .clear {clear: both;} .select { padding-right: 1px; border-bottom: none; background-color: #fff; } a:link, a:visited { font-size: 16px; font-weight: bold; color: #888; text-decoration: none; } .select a { color: #333; } a:hover, a:active { color: #f20; font-weight: bold; } .tab-txt { width: 400px; padding: 40px; overflow: hidden; } .demo {display: none;} .tab-txt p { line-height: 40px; }
- 女枪
- 提莫
- 盖伦
- 剑圣
我有两把枪，一把叫射，另一把叫，啊~
你有一双迷人的眼睛，我非常喜欢！
我去前面探探路
提莫队长正在待命！
放马过来吧，你会死的很光荣的！
快点儿结束吧，我头有点儿转晕了……
我的剑就是你的剑。
眼睛多，看东西才会更加清楚
2.鼠标移入移出延时切换
tab切换之延时切换 * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto; width: 400px; height: 200px; border: 1px solid #f70; overflow: hidden; } .tabbox .tab-tit{ position: relative; height: 40px; } ul { position: absolute; left: -1px; width: 401px; height: 40px; line-height: 40px; background-color: #eaeaea; } ul li { float: left; border-left: 1px solid #f70; border-bottom: 1px solid #f70; text-align: center; width: 99px; height: 40px; overflow: hidden; } .clear {clear: both;} .select { padding-right: 1px; border-bottom: none; background-color: #fff; } a:link, a:visited { font-size: 16px; font-weight: bold; color: #888; text-decoration: none; } .select a { color: #333; } a:hover, a:active { color: #f20; font-weight: bold; } .tab-txt { width: 400px; padding: 40px; overflow: hidden; } .demo {display: none;} .tab-txt p { line-height: 40px; }
- 女枪
- 提莫
- 盖伦
- 剑圣
我有两把枪，一把叫射，另一把叫，啊~
你有一双迷人的眼睛，我非常喜欢！
我去前面探探路
提莫队长正在待命！
放马过来吧，你会死的很光荣的！
快点儿结束吧，我头有点儿转晕了……
我的剑就是你的剑。
眼睛多，看东西才会更加清楚
3. tab自动切换，鼠标移入移出立即切换
tab切换之自动切换 * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto; width: 400px; height: 200px; border: 1px solid #f70; overflow: hidden; } .tabbox .tab-tit{ position: relative; height: 40px; } ul { position: absolute; left: -1px; width: 401px; height: 40px; line-height: 40px; background-color: #eaeaea; } ul li { float: left; border-left: 1px solid #f70; border-bottom: 1px solid #f70; text-align: center; width: 99px; height: 40px; overflow: hidden; } .clear {clear: both;} .select { padding-right: 1px; border-bottom: none; background-color: #fff; } a:link, a:visited { font-size: 16px; font-weight: bold; color: #888; text-decoration: none; } .select a { color: #333; } a:hover, a:active { color: #f20; font-weight: bold; } .tab-txt { width: 400px; padding: 40px; overflow: hidden; } .demo {display: none;} .tab-txt p { line-height: 40px; }
- 女枪
- 提莫
- 盖伦
- 剑圣
我有两把枪，一把叫射，另一把叫，啊~
你有一双迷人的眼睛，我非常喜欢！
我去前面探探路
提莫队长正在待命！
放马过来吧，你会死的很光荣的！
快点儿结束吧，我头有点儿转晕了……
我的剑就是你的剑。
眼睛多，看东西才会更加清楚
4. 广告栏切换实例
Document * { margin: 0; padding: 0; list-style: none; } .wrap { height: 170px; width: 490px; margin: 20px auto; overflow: hidden; position: relative; margin: 100px auto; } .wrap ul { position: absolute; } .wrap ul li { height: 170px; } .wrap ol { position: absolute; right: 5px; bottom: 10px; } .wrap ol li { height: 20px; width: 20px; background: #ccc; border: solid 1px #666; margin-left: 5px; color: #000; float: left; line-height: center; text-align: center; cursor: pointer; } .wrap ol .on { background: #E97305; color: #fff; }
- 1
- 2
- 3
- 4
- 5
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！
以上就是几种tab切换详解的详细内容，更多请关注本站其它相关文章！
