jquery的tab插件2-原创手记-慕课网

<!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>