jQuery+CSS实现的标签页效果示例【测试可用】

本文实例讲述了jQuery+CSS实现的标签页效果。分享给大家供大家参考，具体如下：

CSS代码：

#tabs{
  width:600px;
  height:250px;
  background:white;
  margin:20px;
}
#tabs ul{
  float:left;
  margin:20px 0 0 20px;
  padding:0;
}
#tabs li{
  width:80px;
  height:40px;
  line-height:40px;
  display:inline-block;
  text-align:center;
  border-bottom:1px solid grey;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  background:#eeeeee;
  position:relative;
  top:1px;
}
#tabs li:hover{
  color:#aaaaaa;
  cursor:pointer;
}
.items{
  width:560px;
  height:175px;
  font-size:16px;
  text-align:center;
  border:1px solid grey;
  float:left;
  margin-left:20px;
}

jQuery代码：

$(document).ready(function(){
  $("li").bind("click",function(){
    $(".items").hide();
    $("#"+$(this).attr("name")).show();
    $("li").css({
      "border-top":"1px solid white",
      "border-left":"1px solid white",
      "border-right":"1px solid white",
      "border-bottom":"1px solid grey",
      "background":"#eeeeee"
    });
    $(this).css({
      "border-top":"1px solid grey",
      "border-left":"1px solid grey",
      "border-right":"1px solid grey",
      "border-bottom":"1px solid white",
      "background":"white"
    });
  });
  $("li:first-child").click();
});

HTML部分代码：

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<div id="tabs">
  <ul>
    <li name="lst1">标签1</li>
    <li name="lst2">标签2</li>
    <li name="lst3">标签3</li>
    <li name="lst4">标签4</li>
  </ul>
  <div class="items" id="lst1">内容1</div>
  <div class="items" id="lst2">内容2</div>
  <div class="items" id="lst3">内容3</div>
  <div class="items" id="lst4">内容4</div>
</div>

这里使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun，测试运行效果如下：

感兴趣的朋友可以动手测试一下看看效果如何。

PS：或者还可以将上述代码组合成完成的HTML页面，再使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，测试运行效果。

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

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

赞 (0)

相关推荐

  • jQuery+CSS实现滑动的标签分栏切换效果

    jQuery+CSS实现滑动的标签分栏切换效果

    本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 运行代码如下 具体代码如下 <html> <head> <title>jQuery平滑滚动的标签分栏切换</title> <meta charset="gb2312"> <style> ul,li{ margin:0px; padding:0px; list-style:none } li{ float:left; back

  • jquery tab标签页的制作

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

  • jQuery+css实现的tab切换标签(兼容各浏览器)

    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/

  • jqueryUI tab标签页代码分享

    本文实例为大家分享了jqueryUI tab标签页的具体代码,供大家参考,具体内容如下 var temp=1; var arr=["我的首页"]; //×号点击关闭li $("#tabs").delegate( ".ui-icon-close", "click", function() { var panelId = $( this ).closest( "li" ).remove().attr( &quo

  • jQuery+css实现的换页标签栏效果

    jQuery+css实现的换页标签栏效果

    本文实例讲述了jQuery+css实现的换页标签栏效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>index</title> <script type="text/javascript" src="jquery.js"></script> <style type="t

  • 基于jQuery实现多标签页切换的效果(web前端开发)

    基于jQuery实现多标签页切换的效果(web前端开发)

    这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页 方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" onclick=&quo

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

    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

  • js与jquery分别实现tab标签页功能的方法

    本文实例讲述了js与jquery分别实现tab标签页功能的方法.分享给大家供大家参考,具体如下: 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float: left; border: 1px solid #ddd; width: 100px; height: 20px; text-align: center; line-height: 2

  • JQuery标签页效果实例详解

    JQuery标签页效果实例详解

    本文实例讲述了JQuery标签页效果实现方法.分享给大家供大家参考,具体如下: 第一个标签页中鼠标滑过显示不同的标签页,第二个标签页中点击不同标签加载其他页面中的内容,加载等待的图片缓慢隐藏,效果图如下: /WebRoot/4.Tab.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> &l

  • jQuery+CSS实现的标签页效果示例【测试可用】

    jQuery+CSS实现的标签页效果示例【测试可用】

    本文实例讲述了jQuery+CSS实现的标签页效果.分享给大家供大家参考,具体如下: CSS代码: #tabs{ width:600px; height:250px; background:white; margin:20px; } #tabs ul{ float:left; margin:20px 0 0 20px; padding:0; } #tabs li{ width:80px; height:40px; line-height:40px; display:inline-block; t

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

    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/xhtml"> <

  • JQuery标签页效果的两个实例讲解（4）

    JQuery标签页效果的两个实例讲解（4）

    按照惯例,我们还是先来看一下最终要达到效果图: 和上一个菜单效果类似,当鼠标移动到标签上的时候,下面会显示相应的内容.当然,同样存在滑动门的问题.  前台页面的代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="tab.aspx.cs" Inherits="tab" %> <!DOCTYPE html PUBLIC "-//W3C/

  • jQuery实现标签页效果实战（4）

    jQuery实现标签页效果实战（4）

    今天我们来完成<jQuery实战>系列的标签页效果.先来看一看效果图 这里有两部分的内容,上面是一个标签页的效果,下面也是一个标签页的效果.在实际应用中也经常会见到标签页的效果,它的作用主要是在页面可视区有限的情况下展示更多的内容.当用户想看其他内容的时候不需要离开页面,只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容.门户网站的首页,有很多频道都是标签页的最佳案例,如体育.财经.军事等模块都是位于不同的标签上.上边的标签页一般称为滑动门技术,下面的内容是一次性加载进来,鼠标移

  • JS实现标签页效果(配合css)

    JS实现标签页效果(配合css)

    实现的效果: 如上图所示为制作的标签页,我们想要实现的效果是当鼠标移到某一个标签的时候,在下面的内容区显示对应的内容,并且相应标签的颜色需要改变,如图中所示当前鼠标的位置在"标签1"上,则内容区域显示的内容为"我是内容1",并且"标签1"的颜色要比"标签2"和"标签3"深一些,同样鼠标移到"标签2"和"标签3"的时候显示"我是内容2"和"

  • android实现滑动标签页效果的代码解析

    实现效果: 实现功能: ViewPager+Fragment实现加载界面 SQLite数据获取并显示到ListView上 ListView的item监听并携带数据跳转到其他界面 使用SharedPreference存储部分测试数据 实现过程: 各方法和变量的作用请详见代码注释. listview的数据显示请见Android Studio获取SQLite数据并显示到ListView上Fragment+ViewParger实现界面加载 首先要创建两个类并继承Fragment,在viewpager中实

随机推荐