jQuery实现仿腾讯迷你首页选项卡效果代码实现仿腾讯迷你首页选项卡效果代码
本文实例讲述了jQuery实现仿腾讯迷你首页选项卡效果。分享给大家供大家参考。具体如下：
这是一款基于jQuery实现的选项卡，清爽无修饰版，仿腾讯的迷你首页。选项卡的前后可以有一个控件箭头，点击这两个箭头
可控件选项卡向左、向右滚动，在有限的网页空间内布局更多的内容成为可能，相信你会喜欢的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-t-tencent-index-style-nav-codes/
具体代码如下：
<!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>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery选项卡</title>
<style type="text/css">
<!--
*{ margin:0; padding:0;}
body{ font-size:12px;}
ul,li{ list-style-type:none;}
#tab{ width:500px; height:200px; margin:20px auto; overflow:hidden;}
#tab .tab_title{ width:500px; height:22px; overflow:hidden;left:0; top:0; clear:both; overflow:hidden; position:relative;}
#tab .tab_title .u{ width:465px; overflow:hidden; position:relative;}
#tab .tab_title ul{ margin:0 5px; position:absolute; float:left; width:1392px;}
#tab .tab_title div{ float:left;width:15px; height:20px; line-height:20px; cursor:pointer;}
#tab .tab_title span.vright{top:0; right:5px; margin-left:2px;}
#tab .tab_title span.vleft{top:0; left:0px; padding-left:5px;}
#tab .tab_title li{ float:left; width:50px; height:20px; line-height:20px; text-align:center; background-color:#cccccc; margin-right:6px; border:1px #999999
solid; cursor:pointer;}
#tab .tab_title li:hover{ background-color:#999999}
#tab .tab_title li.selected{ background-color:#666666;}
#tab .tab_content{ width:476px; height:156px; overflow:hidden; padding:10px; border:1px #CCCCCC solid;}
#tab .tab_content div{ border:1px #999999 dotted; }
#tab .tab_content div p{ line-height:1.5; text-indent:25px; color:#333333;}
#tab .tab_content .none{ display:none;}
#div1{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px;
color:#999999;}
#div2{ width:120px; height:15px; border:1px #CCCCCC solid; position:absolute; display:none; background:#CCCCCC; font-size:5px; padding:2px;
color:#999999;}
-->
</style>
<script language="javascript">
$(function(){
var index = 0;
$(".tab_title ul li").click(function(){
index = $(".tab_title ul li").index(this);
$(this).addClass("selected").siblings().removeClass("selected");
$(".tab_content div").eq(index).show().siblings().hide();
});
var i = 8; //定义每个面板显示8个菜单
var len = $(".u .scrol li").length; //获得LI元素的个数
var page = 1;
资源评论
weixin_38693720
- 粉丝: 10
- 资源: 901
