基于jQuery实现仿百度首页选项卡切换效果
以下代码比较简单，所以没给大家附太多的注释，有问题欢迎给我留言，具体详情请看下文代码吧。
先给大家展示下效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery仿百度首页选项卡切换效果 - 何问起</title>
<base target="_blank" />
<style type="text/css">
body {
background: url(http://hovertree.com/texiao/jquery/71/images/65.jpg) no-repeat fixed center center;
}
.hovertreepage .clear {
clear: both;
}
.hovertreepage {
margin: 200px auto 0 auto;
width: 700px;
height: 300px;
}
.hovertreepage .left, .hovertreepage .right {
float: left;
}
.hovertreepage .nav-back {
width: 60px;
height: 300px;
background: #000;
opacity: .3;
filter: alpha(opacity=30);
}
.hovertreepage .nav {
position: relative;
margin-top: -300px;
width: 60px;
text-align: center;
font-size: 14px;
font-family: "微软雅黑";
color: #fff;
}
.hovertreepage .nav div {
height: 32px;
line-height: 28px;
cursor:pointer;
}
.hovertreepage .nav div.on {
background: #0094ea;
}
.hovertreepage .right {
width: 620px;
height: 300px;
margin-left: 20px;
}
.hovertreepage .content-back {
width: 620px;
height: 300px;
background: #fff;
opacity: .3;
}
.hovertreepage .content {
position: relative;
width: 600px;
height: 280px;
margin-top: -300px;
padding: 10px;
overflow: hidden;
}
.hovertreepage .content a{color:blue;}
.hovertreepage .content div {
width: 600px;
height: 280px;
margin-bottom: 10px;
background: #fff;
}
</style>
</head>
<body>
<div class="hovertreepage">
<div class="left">
<div class="nav-back"></div>
<div class="nav">
<div class="on">导航</div>
<div>新闻</div>
<div>世界杯</div>
<div>音乐</div>
<div>彩票</div>
</div>
</div>
<div class="right">
<div class="content-back"></div>
<div class="content">
<div>1 <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/n781jmfy.htm">原文</a>
</div>
<div>2 </div>
<div>3 <a href="http://hovertree.com/texiao/jquery/70/color.htm">服装店风云</a> 自从接触编程以后，兴趣就一直有增无减。</div>
<div>4 <a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">jQuery全部版本下载</a>
时间就是金钱，效率就是生命。
</div>
<div>5 <a href="http://hovertree.com/texiao/html5/30/"><img src="http://hovertree.com/hvtimg/bjafjd/wmt3mxd7.png" alt="孙悟空" /></a></div>
</div>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(".hovertreepage .nav div").mouseenter(function () {
var $this = $(this);
var index = $this.index();
}).mouseleave(function () {
var $this = $(this);
var index = $this.index();
}).click(function () {
var $this = $(this);
var index = $this.index();
var l = -(index * 290);
$(".hove"+"rtreepage .nav div").removeClass("on");
$(".hovertreepage .nav div").eq(index).addClass("on");
$(".hovertreepage .content div:eq(0)").stop().animate({ "margin-top": l }, 500);
});
</script>
</body>
</html>
以上内容是小编给大家介绍的基于jQuery实现仿百度首页选项卡切换效果，希望对大家有所帮助！
-
本文向大家介绍基于jQuery实现的仿百度首页滑动选项卡效果代码，包括了基于jQuery实现的仿百度首页滑动选项卡效果代码的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了基于jQuery实现的仿百度首页滑动选项卡效果代码。分享给大家供大家参考，具体如下： 今天给大家分享一款基于jQuery的仿百度首页滑动选项卡，可实现tab选项卡内容上下翻滚切换的功能。这款选项卡适用浏览器有：IE8、36
-
本文向大家介绍基于jQuery实现仿百度首页换肤背景图片切换代码，包括了基于jQuery实现仿百度首页换肤背景图片切换代码的使用技巧和注意事项，需要的朋友参考一下 不多说了，先给大家展示效果图，本文支持源码下载哦，需要的朋友可以直接下载使用，代码很简单哦～ 在线预览 源码下载 html代码： css代码： 以上代码就是本文介绍基于jQuery实现仿百度首页换肤背景图片切换代码，希望大家喜欢。
-
本文向大家介绍轻松实现jquery选项卡切换效果，包括了轻松实现jquery选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 很早之想就学习jquery的插件写法，一直拖到现在，今天趁着没什么工作忙，搜索些资料学习下，写了个比较简单的选项卡效果。 刚开始有看到一个很通俗易通的例子：alert对话框。 jquery.alertMsg.js 调用方式： jQuery插件结构 选项卡实现： 1、H
-
本文向大家介绍jQuery简单实现tab选项卡切换效果，包括了jQuery简单实现tab选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~ 效果图： 代码： 以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍vue实现选项卡及选项卡切换效果，包括了vue实现选项卡及选项卡切换效果的使用技巧和注意事项，需要的朋友参考一下 这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍，既然是从入门到实战，我直接将平时项目中需要实现的一些效果拆分成模块。你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查，再回过头来看我的实现代码。记住，通读Vue文档真的很重要，很重要！ 这里的V
-
本文向大家介绍jQuery实现Tab选项卡切换效果简单演示，包括了jQuery实现Tab选项卡切换效果简单演示的使用技巧和注意事项，需要的朋友参考一下 本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示，完全是自己的思考实现过程，分享给大家供大家参考。具体如下： 起初我Html代码架子是这样的： 后来换成了下面这个： 之所以换成这个，是因为我觉得 dl dt dd 在页面布局中用的比