`
yudan215
  • 浏览: 22016 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
syosann
社区版块
存档分类
最新评论

一个JQ Tab标签切换效果

 
阅读更多

一个JQ 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>自己动手做个简单的jquery版table切换,部分注释</title>

<meta name="keywords" content="jQuery切换,table切换,简洁轮换效果,有部分注释" >

<meta name="description" content="站长168,重注前端开发,web前端开发">

<style type="text/css">

body,div,ul,li,a,h1,h2{margin:0;padding:0}/*--使所用到的标签内外边距清零，不推荐使用*{margin:0;padding}--*/

ul,li{list-style-type:none}/*--清除列表格式--*/

body{margin:0 auto;font:12px/1.5 tahoma,arial,\5b8b\4f53;color:#828282;background:#fff}/*--body居中，字体大小行高字体格式颜色，背景--*/

.box{width:200px;height:200px;margin:0 auto;border:1px #ccc solid}/*--border边框为1个像素灰色的实线边框--*/

.box_title{width:100%;height:30px;float:left;line-height:30px;background:#ccc}/*--宽100%高30px左浮动行高30px背景灰色--*/

.box_title li{width:50px;float:left;cursor:pointer;text-align:center}/*--宽度50px左浮动移动过去出现手形式内容居中--*/

.box_content{width:100%;height:200px;float:left}

.box_content li{width:100%;float:left}

.cc{width:50px;height:30px;float:left;display:block;color:#3e3e3e;background:#fff}

.j2,.j3,.j4{display:none}

</style>

</head>

 

<body>

<div class="box">

<ul class="box_title">

<li id="j1" class="cc">1</li>

<li id="j2">2</li>

<li id="j3">3</li>

<li id="j4">4</li>

</ul>

<ul class="box_content">

<li class="j1">1</li>

<li class="j2">2</li>

<li class="j3">3</li>

<li class="j4">4</li>

</ul>

</div>

 

 

<div class="box">

<ul class="box_title">

<li id="j1" class="cc">1</li>

<li id="j2">2</li>

<li id="j3">3</li>

<li id="j4">4</li>

</ul>

<ul class="box_content">

<li class="j1">1</li>

<li class="j2">2</li>

<li class="j3">3</li>

<li class="j4">4</li>

</ul>

</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $(".box_title li").mouseover(function(){                   //移动到.box_title下的li

  $(this).addClass("cc").siblings().removeClass();//移动到当下的li增加样式.cc其他的不加并移除样式

  $($(this).parent().next().find("li."+$(this).attr("id"))).show().siblings().hide();       //获取当前的id属性值与之前的.结合，合成类，显示，其他隐藏

  

  

 });

})

</script>

</body>

</html>
 
分享到：
| 28个HTML5的新特性，技巧以及技术
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics