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>
时间: 2024-10-15 00:12:19

jq 选项卡的相关文章

JQ选项卡(面向对象)

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta h

组件开发之选项卡-1

1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> 8

JQuery基础三

JQ选项卡实列<style> #div1 div{ width:200px; height:200px; border:1px red solid; display:none;} .active{ background:red;} </style> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script> $(f

JS实现选项卡切换——原生与JQ

原生 <!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="Conte

jq的选项卡tab

jq中选项卡很简单,的注意是他结构命名(网上有很多,其中不乏不规范) 1.tab 2.tab-hd (选项栏) 3.tab-bd(选项栏对应的内容) css代码(布局没问题,可以只看jquery代码) *{padding: 0; margin: 0;} ul {list-style: none; } .tab {width:450px; height:200px; overflow: hidden; border:1px solid #ccc; margin: 0 auto; } .tab-hd

JQ实现选项卡切换

使用JQuery实现选项卡切换:触发添加和删除类名! html代码 <div> <div class="ig"> <img src="images/dl1.jpg" > <div class="video-btn"> <p>Watch video</p> <a href=""><i></i></a></

JQ最简单最易懂的淡入淡出选项卡

$(function(){ $(".nav dd").click(function(){ $('.nav dd').eq($(this).index()).addClass("active").siblings().removeClass("active");   //选项卡选择一个  $(".div1 ul li").hide(function(){    $(this).fadeOut('slow');  }).eq($(

使用jq实现tab选项卡

jq代码 $('#fenlei_title span').click(function() { $("#fenlei_title span").eq($(this).index()).addClass("current").siblings().removeClass('current'); $(".J_pic").hide().eq($(this).index()).show(); });

JQ简单的选项卡

$(function(){ $(".nav dd").click(function(){           $('.nav dd').eq($(this).index()).addClass("active").siblings().removeClass("active"); $(".div1 ul li").hide().eq($(this).index()).show(); }) }) <div class=&q