jq 选项卡 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
ul,li{
    list-style-type:none;
    }
li{
    width:50px;
    height:30px;
    background:white;
    border:1px solid #CCC;
    display:inline;
    padding:8px;
    cursor:pointer;
    }
div{
    width:400px;
    height:100px;
    border:1px #999999 solid;
    display:none;
    }
.active {
    background:#333;
    color:white;
    }        
</style>
<script src="jquery-1.11.2.js"></script>
<script>
/*window.onload = function ()
{
    var ali = document.getElementsByTagName('li');
    var adiv = document.getElementsByTagName('div')
    for(var i = 0; i < ali.length; i++)
    {
        ali[i].index = i;
        ali[i].onclick = function ()
        {
            for(var i = 0; i < adiv.length; i++)
            {
                ali[i].className = '';
                adiv[i].style.display = 'none';
            }
            ali[this.index].className = 'active';
            adiv[this.index].style.display = 'block';
            
        }
    }
}*/

$(function ()
{
    $('li').click(function ()
    {
        $('li').attr('class','');
        $('div').css('display','none');
        
        $(this).attr('class','active');
        $('div').eq($(this).index()).css('display','block');
    })
})
</script>
<title>无标题文档</title>
</head>

<body>

<ul>
    <li >选项一</li>
    <li>选项二</li>
    <li>选项三</li>
</ul>
<div style="display:block;">11111</div>
<div>22222</div>
<div>33333</div>
</body>
</html>

 

posted @ 2015-02-27 15:28  mayufo  阅读(385)  评论(0)    收藏  举报