jQuery简单几行代码实现tab切换
2015-03-12来源:易贤网

本文给大家介绍的是一款使用jQuery实现的简易选项卡的代码,通过控制css熟悉来实现tab切换,思路清晰,这里推荐给大家。

今天突然心血来潮,想到一个很简单的方法即可达到的tab效果

其实逻辑很简单,但看到网上基本上没这样写的

不知道实际应用中是否会有问题呢,请大侠指教

代码如下:

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery简易选项卡</title>

<style>

*{ margin:0; padding:0;}

body, ul, li {

margin:0;

padding:0;

}

body {

font:12px/1.5 Tahoma;

}

#outer {

width:450px;

margin:10px auto;

}

#tab {

overflow:hidden;

zoom:1;

background:#000;

border:1px solid #000;

}

#tab li {

float:left;

color:#fff;

height:30px;

cursor:pointer;

line-height:30px;

list-style-type:none;

padding:0 20px;

}

#tab li.current {

color:#000;

background:#ccc;

}

#content {

border:1px solid #000;

border-top-width:0;

}

#content ul {

line-height:25px;

display:none;

margin:0 30px;

padding:10px 0;

}

</style>

</head>

<body>

<div id="outer">

<ul id="tab">

<li class="current">第一课</li>

<li>第二课</li>

<li>第三课</li>

</ul>

<div id="content">

<ul style="display:block;">

1111

</ul>

<ul>

2222

</ul>

<ul>

3333

</ul>

</div>

</div>

<script src=">

<script>

$(function(){

window.onload = function()

{

var $li = $('#tab li');

var $ul = $('#content ul');

$li.click(function(){

$li.removeClass();

var $t = $(this).index();

$(this).addClass('current');

$ul.css('display','none');

$ul.eq($t).css('display','block');

})

}

});

</script>

</body>

</html>

图片演示:

名单

以上就是本文所述的全部内容了,希望大家能够喜欢。

更多信息请查看IT技术专栏

2026公务员·事业单位培训课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
推荐信息