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

2024-09-27 21:01:01

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

实现tab切换的主要html代码：

 <div class="container"> 

  <ul class="tabs">
   <li class="active"><a href="#tab1">导航菜单</a></li>
   <li><a href="#tab4">TAB标签</a></li>
  </ul>
  <div class="tab_container">
   <div id="tab1" class="tab_content" style="display: block; "> 

    <h3><a href="http://www.freejs.net/article_daohangcaidan_13.html">jquery css多级下拉菜单</a></h3>
    <p id="">多级菜单，理论上支持无限多的层级，文件结构非常简单的，具体的请看下面的内容</p>
   </div> 

   <div id="tab4" class="tab_content" style="display: none; ">
    <h2>各种tab标签选项卡</h2>
    <h3><a href="http://www.freejs.net/article_tabbiaoqian_17.html">tab标签页面,ajax载入</a></h3> 

    <p> tab标签，jquery ajax载入数据库的内容</p>
   </div>
  </div> 

 </div>

实现tab切换的jquery代码：

<script type="text/javascript"> 

$(document).ready(function() { 

 //默认active
 $(".tab_content").hide(); //隐藏全部的tab菜单内容
 $("ul.tabs li:first").addClass("active").show(); //对第一个li标签添加class="active属性"
 $(".tab_content:first").show(); //显示第一个tab内容 

 //点击事件
 $("ul.tabs li").click(function() {
  $("ul.tabs li").removeClass("active"); //移除class="active"属性
  $(this).addClass("active"); //添加class="active"到选择标签中
  $(".tab_content").hide(); //隐藏全部标签内容
  var activeTab = $(this).find("a").attr("href"); //找到所属属性值来识别活跃选项卡和内容
  $(activeTab).fadeIn(); //使内容消失
  return false;
 }); 

});
</script>

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

本文为作者申文哲原创，转载出处：http://www.cnblogs.com/wenzheshen/

几种tab切换详解

1.鼠标移入移出切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切换</title> <style type="text/css"> * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { marg
最简单的tab切换实例代码

JS: $(".con").eq(0).show(); $(".btn span").click(function(){ var num =$(".btn span").index(this); $(".con").hide(); $(".con").eq(num).show().slblings().hide(); }) CSS: body { cursor:default; -webkit-text-s
微信小程序 swiper制作tab切换实现附源码

微信小程序 swiper制作tab切换实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view
jQuery+css实现的tab切换标签(兼容各浏览器)

本文实例讲述了jQuery+css实现的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.org/1999/
jQuery实现带延迟的二级tab切换下拉列表效果

本文实例讲述了jQuery实现带延迟的二级tab切换下拉列表效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现带延时效果的下拉列表菜单,有动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q
javascript实现tab切换的四种方法

tab切换在网页中很常见,故最近总结了4种实现方法. 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style:
Android App中制作仿MIUI的Tab切换效果的实例分享

1.概述哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过TabPageIndicator,并且很多知名APP都使用过这个开源的指示器.大家有没有想过如何自己去实现这样的一个指示器,并且代码会有多复杂呢~~~今天,我就带领大家来从无到有的实现这样一个指示器,当然了,不准备一模一样,搞得没有创新似的,再看标题,跟MIUI相关,所以我们准备做一个特性与TabPageIndicator一致的,但是样子和MIUI的Tab一样的~
js中常用的Tab切换效果(推荐)

如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto
javascript实现tab切换的两个实例

上一篇<javascript实现tab切换的四种方法>中讲了tab切换的4种不同实现原理,那么,现在到理论联系实际的时候了,下面就写几个实例. 一.仿"中国人民大学"官网的tab切换,背景是图片,效果图如下: 鼠标移到新闻时的效果鼠标移到公告时的效果鼠标移到交流时的效果学术.交流和文体的内容为空,我没有写.完整代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv=
jquery实现初次打开有动画效果的网页TAB切换代码

本文实例讲述了jquery实现初次打开有动画效果的网页TAB切换代码.分享给大家供大家参考.具体如下: 这是一款初次打开有动画效果的网页TAB代码,只在第一次点击TAB菜单的时候,会显示动画,再次点击的时候就没有了,一个实用的网页选项卡效果,有需要的请下载吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-first-open-flash-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PU

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

相关推荐

随机推荐