<!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插件Tab选项卡-更自由</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
<style type="text/css">
*
{
margin:0;
padding:0;
}
ul
{
list-style-type:none;
overflow:auto;
_display:inline-block;
}
ul li
{
display:inline;
}
.imagebox {
border:1px solid red;
width:128px;
margin:10px auto;
padding:10px;
border:2px solid #F4EA92;
background-color:#FDFCF3;
}
.imagebox ul
{
padding:5px;
background-color:#FBF8E1;
}
.imagebox a {
display:block;
width:25px;
height:25px;
line-height:25px;
text-align:center;
float:left;
outline:none;
text-decoration:none;
}
.imagebox a:hover { }
.imagebox a.selected {
background:snow;
color:#222;
font-weight:bold;
text-decoration:underline;
border:1px solid #F7EFAB;
}
.imagebox img { display:inline-block;margin:5px 0;}
</style>
</head>
<body>
<div class="imagebox idTabs">
<img id="img1" src="imgs/icon1.png">
<img id="img2" src="imgs/icon2.png">
<img id="img3" src="imgs/icon3.png">
<img id="img4" src="imgs/icon4.png">
<ul>
<li><a class="selected" href="#img1">1</a></li>
<li><a href="#img2">2</a></li>
<li><a href="#img3">3</a></li>
<li><a href="#img4">4</a></li>
</ul>
</div>
<script type="text/javascript">
$(".imagebox").idTabs("!mouseover");
</script>
</body>
</html>
共同学习，写下你的评论
评论加载中...
作者其他优质文章
