jQuery实现的tab标签切换效果示例

2024-10-09 01:38:22

本文实例讲述了jQuery实现的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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/basic.css" />
<style type="text/css">
.t-case{ width:715px; height:451px; background-color:#fff; margin:18px auto 0 auto;}
.t-case h3{ height:50px; line-height:50px; background-color:#178eb9;}
.t-case h3 a{ color:#fff; font-size:22px; padding-left:25px;}
.t-case h3 a:hover{ color:#fff; text-decoration:none;}
.m-case{ width:715px; height:401px;}
.m-case-show{ width:715px; height:291px;}
.ui-case-cont{ width:326px; height:291px;}
.ui-case-cont img{ width:260px; height:240px; padding:31px 0 0 35px;}
.ui-case-info{ width:389px;}
.ui-case-info p{ color:#000;}
.lb-case-title{font-size:16px; padding-top:76px;}
.lb-case-info{ font-size:14px; padding:16px 0 20px 0;}
.lb-case-item{ font-size:12px; line-height:20px;}
.ui-case-info a{ width:130px; height:33px; line-height:33px; display:block; border-radius:3px; font-size:16px; font-weight:bold; color:#fff; text-align:center; margin-top:22px;}
.ui-case-info a:hover{ color:#fff; text-decoration:none;}
.lb-zixun{ background-color:#b2aeaf;}
.lb-guahao{ background-color:#fa6101; margin-left:20px;}
.m-case-img{}
.m-case-img a{ width:127px; height:78px; display:block; margin-left:10px; _margin-left:8px; border:2px solid #fff;}
.m-case-img a:hover{ border:2px solid #178eb9;}
.m-case-img a img{ width:127px; height:78px;}
.ui-patient-item{ margin:9px 0 0 24px;}
.ui-patient-item a{ width:115px; height:38px; display:block; background-color:#178eb9; color:#fff; line-height:38px; text-align:center; margin:2px 5px 0 0;}
.ui-patient-item a:hover{ color:#fff; text-decoration:none;}
</style>
</head>
<body>
<div class="t-case">
  <h3><a href="###">测试</a></h3>
  <div class="m-case g-fl">
    <div class="m-case-show" id="incase1">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名1 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-show" style="display:none;" id="incase2">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名2 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-show" style="display:none;" id="incase3">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名3 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-show" style="display:none;" id="incase4">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名4 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-show" style="display:none;" id="incase5">
      <div class="ui-case-cont g-fl"><img src="img/case1.jpg" /></div>
      <div class="ui-case-info g-fl">
        <p class="lb-case-title">人名5 职业名称</p>
        <p class="lb-case-info">擅长：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <p class="lb-case-item">XXX医生</p>
        <p class="lb-case-item">XXXXXXXXXXXX证书</p>
        <p class="lb-case-item">XXXXXXXXXXXXXXXXXXXXX会员</p>
        <a href="###" class="lb-zixun g-fl">在线咨询</a>
        <a href="###" class="lb-guahao g-fl">预约挂号</a>
      </div>
    </div>
    <div class="m-case-img">
      <a href="###" class="g-fl" id="case1"><img src="img/case1_img.jpg" /></a>
      <a href="###" class="g-fl" id="case2"><img src="img/case2_img.jpg" /></a>
      <a href="###" class="g-fl" id="case3"><img src="img/case3_img.jpg" /></a>
      <a href="###" class="g-fl" id="case4"><img src="img/case4_img.jpg" /></a>
      <a href="###" class="g-fl" id="case5"><img src="img/case5_img.jpg" /></a>
    </div>
  </div>
</div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $('#case1').css('border-color','#178eb9');
  $('.m-case-img>a').mouseover(function(){
    var caseId = $(this).attr('id');
    $('#in'+caseId).show().siblings('.m-case-show').hide();
    $('#'+caseId).css('border-color','#178eb9').siblings('.m-case-img>a').css('border-color','#fff');
  });
});
</script>
</body>
</html>

效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现简单的tab标签页效果

本文实例讲述了jQuery实现简单的tab标签页效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab1</title> <style type="text/css"> *{ padding: 0; margin: 0;} li{ l
jQuery EasyUI 布局之动态添加tabs标签页

在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用
jQuery实现tab标签自动切换的方法

本文实例讲述了jQuery实现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/xht
通过jquery实现tab标签浏览效果

效果和说明文档:http://www.healdream.com/upLoad/html/jquery/tabs/index_zh.html 下载:http://www.51files.com/?2LDPUOZ0F56P52ZLDNYD 之前通过yui也实现了相同的功能,但是yui有个比较大的缺点就是js文档太大了,一个tabview.js就有60k,再加上event.js也有近60k,实在是不能承受,之前一直没有发现这个问题,自从发现了jquery之后,就对这个小巧的轻量级的客户端工具有了好感
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通过a标签删除table中的一行的代码

复制代码代码如下: <tr> <td width="10%"> <s:property value="#owner.id" /> </td> <td width="20%"> <s:property value="#owner.name" /> </td> <td width="15%"> <s:prop
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标签切换效果第1/2页

所以自己也下了一个来学习,把之前写的几个JS代码都转换成JQuery,既能保证代码的清晰,也保证了代码的通用性,真是一举两得啊,由于是初学者,所以代码有许多的不足,还请大家多多指正:)1.实现图片翻转效果,DW本身提供了这个功能,不过还是自己写的好用,呵呵.之前写的方式比较麻烦,代码也比较乱,用JQuery改造后可以使其更加清晰,核心代码如下: JS代码复制代码代码如下: <script type="text/javascript"> <!-- $(documen
DIY jquery plugin - tabs标签切换实现代码

Why DIY jquery tab 接触jquery 2,3个月了,一直都未动手写过插件.正好最近比较闲,就打算把一直看不顺眼的项目中现有的tab改造一番(现有的tab未能做成一个控件,copy,past的代码太多). 想着jQuery这么强大的库不可能没有tabs插件吧,赶紧搜了一下,哈,果然!jQuery tabs!心里一阵窃喜,赶紧load下来用用吧.可查看了一下它的用法,才发现不太适用现有的项目耶,我们的tab每一个都对应着一个完整的页面,是用iframe嵌入的.而jQuery tab
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

Tabs 标签页/选项卡用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码代码如下: <div id="tt" class="
jquery tab标签页的制作

这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟,这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃,用到setTimeout函数,主要用到已下的事件 1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法 2 mouseover事件, 还有就是关键的css样式编写,控制显示的样式, 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&

jQuery实现的tab标签切换效果示例

相关推荐

随机推荐