jquery实现有过渡效果的tab切换

本文实例为大家分享了jquery实现tab切换的具体代码，供大家参考，具体内容如下

效果：

代码：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
  ul,li {
  list-style: none;
  margin: 0;
  padding: 0;
  }
  .tabBox {
  width: 400px;
  height: 200px;
  border: 1px solid pink;
  }
  .ul1 {
  height: 40px;
  border-bottom: 1px solid pink;
  }
  .ul1 li {
  width: 25%;
  line-height: 40px;
  text-align: center;
  float: left;
  cursor: pointer;
  }
  .ul1 li.active {
  background-color: pink;
  transition: all 0.6s ease-in-out; /* 标题过渡效果 */
  }
  .ul2 {
  overflow: hidden;
  }
  .ul2 li {
  display: none;
  }
  .ul2 li.selected {
  display: block;
  }
 </style>
 </head>
 <body>
 <div class="tabBox">
  <ul class="ul1">
  <li class="active">标题1</li>
  <li>标题2</li>
  <li>标题3</li>
  <li>标题4</li>
  </ul>
  <ul class="ul2">
  <li class="selected">内容内容1</li>
  <li>内容2内容2</li>
  <li>内容3内容3</li>
  <li>内容4内容4</li>
  </ul>
 </div>
 <script type="text/javascript" src="jquery-2.1.1.js"></script>
 <script>
  $(function(){
  $(".ul1>li").mouseover(function(){
   $(this).addClass("active").siblings("li").removeClass("active");
   var index = $(this).index();
   $(".ul2>li:eq("+index+")").fadeIn(1000).siblings("li").hide();
  })
  })
 </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于jquery的tab切换 js原理

    基于jquery的tab切换 js原理

    html代码: 复制代码 代码如下: <div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3

  • jQuery版Tab标签切换

    jQuery版Tab标签切换

    鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换 效果图: 源代码: 复制代码 代码如下: <!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

  • jQuery简单tab切换效果实现方法

    本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $('.tabtitle li').click(function () { var index = $(this)

  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n

  • jquery移动端TAB触屏切换实现效果

    我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目,如网易新闻等APP栏目切换.我们说的TAB一般由导航条和TAB对应的内容组成,切换导航条上的标签同时标签对应的内容也会跟着切换.本文将结合实例给大家介绍一个移动端TAB触屏切换效果. 我们准备一个TAB导航#pagenavi,里面包含TAB导航要切换的四个导航按钮,然后是切换的主体内容#slider,这里应该放置四个li与导航按钮对应,内容自定义. <div class="box-163css"> <ul id

  • jQuery实现TAB选项卡切换特效简单演示

    jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad

  • 基于jquery tab切换(防止页面刷新)

    基于jquery tab切换(防止页面刷新)

    在网上找了很多jquery效果,都是这样的,于是自己写了一个.防止页面刷新的tab切换, 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

  • jquery-easyui关闭tab自动切换到前一个tab

    复制代码 代码如下: var lastTabs = new Array(); $(function() { /* * cdh 2010.0630 补充,用于 退回上次标签页 */ $('#mainTabs').tabs({ onSelect: function(tt) { //移除 tt lastTabs = $.grep(lastTabs, function(n, i) { return n != tt; }); //重新压入,保证 最新的在最上面 lastTabs.push(tt); //更

  • 使用jquery实现div的tab切换实例代码

    jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写: HTML代码: 复制代码 代码如下: <div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</s

  • jquery实现简单Tab切换菜单效果

    本文实例为大家分享了jquery Tab切换菜单的实现代码,供大家参考,具体内容如下 实现tab切换的主要html代码: <div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">导航菜单</a></li> <li><a href="

随机推荐