素材牛

jQuery Tab选项卡插件jquery.tabs.js

 所属分类:网页特效-选项卡/滑动门

 浏览:657次  下载:2次  评论:0次  发布时间:2016-08-21
jQuery Tab选项卡插件jquery.tabs.js兼容IE6
积分说明:注册即送5牛币,每天签到可获得5牛币,第三方账号登陆、注册直接赠送20牛币!    我要充值   更多积分说明»
素材描述:有5种效果的轻量级tab选项卡插件,支持鼠标滑过、点击、自动切换、数据回调等功能。值得推荐

使用方法:

引入jQuery库文件、插件JS文件

<script type="text/javascript" src="js/jquery-1.4.2.min.js">script>
<script src="js/jquery.tabs.js">script>
<script src="js/jquery.lazyload.js">script>

核心CSS样式

/* box */
.box{width:400px;margin:10px auto 0;background:#fff;border:1px solid #d3d3d3;}
.tab_menu{overflow:hidden;}
.tab_menu li{width:100px;float:left;height:30px;line-height:30px;color:#fff;background:#093;text-align:center;cursor:pointer;}
.tab_menu li.current{color:#333;background:#fff;}
.tab_menu li a{color:#fff;text-decoration:none;}
.tab_menu li.current a{color:#333;}
.tab_box{padding:20px;}
.tab_box li{height:24px;line-height:24px;overflow:hidden;}
.tab_box li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
.tab_box .hide{display:none;}

HTML部分(单个实例)

<div class="box demo1">
  <ul class="tab_menu">
      <li class="current"><a href="#">jquery特效a>li>
      <li><a href="#">javascript 特效a>li>
      <li><a href="#">div+css 教程a>li>
      <li><a href="#">html5 教程a>li>
  ul>
  <div class="tab_box">
      <div>
          <ul>
              <li><span>span><a href="#">jquery smartFloat插件制作仿产品列表页默认排序搜索框a>li>
              <li><span>span><a href="#">jquery 万能float浮动层插件 制作QQ MSN 旺旺在线客服功能a>li>
              <li><span>span><a href="#">jquery 图片延迟加载插件制作tab选项卡图片异步加载a>li>
              <li><span>span><a href="#">jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡a>li>
              <li><span>span><a href="#">jquery 输入框提示特效、机票预定智能输入提示、火车预定智能输入提示a>li>
          ul>
      div>
      <div class="hide">
          <ul>
              <li><span>span><a href="#">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值a>li>
              <li><span>span><a href="#">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动a>li>
              <li><span>span><a href="#">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动a>li>
              <li><span>span><a href="#">js多功能选项卡插件 选项卡自动切换内容图片延迟加载a>li>
              <li><span>span><a href="#"> javascript滚动图片按钮控制图片左右自动滚动a>li>
          ul>
      div>
      <div class="hide">
          <ul>
              <li><span>span><a href="#">div+css制作非常实用的24款分页页码css代码a>li>
              <li><span>span><a href="#">用div+css3美化制作动画导航特效鼠标滑过动画显示a>li>
              <li><span>span><a href="#">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefoxa>li>
              <li><span>span><a href="#">CSS如何定位工程a>li>
              <li><span>span><a href="#">用div+css制作一个CSS3的简约图标导航菜单a>li>
          ul>
      div>
      <div class="hide">
          <ul>
              <li><span>span><a href="#">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果a>li>
              <li><span>span><a href="#">制作CSS3和HTML5的一个单页网站模板a>li>
              <li><span>span><a href="#">jquery 幻灯片切换应用一个HTML5的幻灯片a>li>
              <li><span>span><a href="#">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3a>li>
          ul>
      div>
  div>
div>

兼容好、效果齐全、使用方便,值得分享给大家

讨论这个项目(0)回答他人问题或分享插件使用方法奖励牛币

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的积分余额:0 已下载次数:2
所需牛币:1 开始下载
会员账号
会员密码
安全验证