jQuery做选项卡

<!DOCTYPE html>

<head>

<title>jQuery做选项卡</title>

.btns{

width: 500px;

height: 50px;

}

/*选项卡的样式*/

.btns input{

width: 100px;

height: 50px;

background-color: #ddd;/*默认灰色*/

color: #666;

border: 0px;

}

/*被选中的选项卡的样式*/

.btns input.cur{

background-color: gold;

}

/*内容区的样式*/

.contents div{

width: 500px;

height: 300px;

background-color: gold;

display: none;/*默认隐藏*/

line-height: 300px;

text-align: center;

}

/*被选中的内容区的样式*/

.contents div.active{

display: block;

}

</style>

$(function(){

$('#btns input').click(function(){

//alert(this);//[object HTMLInputElement]

$(this).addClass('cur').siblings().remveClass('cur');

//alert($(this).index());

$('#contents div').eq($(this).index()).

addClass('active').siblings().removeClass('active');

})

$('#box2 #btns input').click(function() {

$(this).blur();

$(this).addClass('cur').siblings().removeClass('cur');

$('#box2 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');

});

})

</script>

</head>

<body>

</div>

<div class="active">tab文字内容一</div>

<div>tab文字内容二</div>

<div>tab文字内容三</div>

</div>

</body>

</html>

jQuery属性操作

<!DOCTYPE html>

<head>

<title>jQuery属性操作</title>

</style>

$(function(){

//innerHtml --> html()

console.log($('.box').html());//这是一个div元素

$('.box').html('<a href="http://www.baidu.com">百度网</a>');

读写值为布尔类型的属性用prop方法

读写值为非布尔类型的属性用attr方法

$('.box').attr({title:'这是一个div！'});//写入title属性，并赋值

//console.log($('box').attr('class'));//读属性class的值，弹出box

var $src = $('#img1').attr('src');

alert($src);//img/10.png

$('#img1').attr({str:'img/12.png',alt:'大王'});

alert($('#check').prop('checked'));//选中为true，非选中为false

$('#check').prop({checked:true});//设置默认勾选

// alert($('.box2').html());//<span>这是div元素内的span</span>

alert($('.box2').text());//这是div元素内的span

})

</script>

</head>

<body>

<div class="box">这是一个div元素</div>

<input type="checkbox" id="check">多选

<span>这是div元素内的span</span>

</div>

</body>

</html>

jQuery特殊效果

<!DOCTYPE html>

<head>

<title>jQuery特殊效果</title>

.box{

width: 200px;

height: 200px;

background-color: gold;

display: none;

}

</style>

$(function(){

$('#btn').click(function () {

// $('.box').fadeOut();//淡出

// $('.box').fadeIn();//淡入

// $('.box').fadeToggle();//淡入淡出

// $('.box').hide();//隐藏

// $('.box').show();//显示

// $('.box').toggle();//显示隐藏

// $('.box').slideDown();//下展

// $('.box').slideUp();//上收

$('.box').slideToggle();//上收下展

})

</script>

</head>

<body>

</body>

</html>

层级菜单

<!DOCTYPE html>

<head>

body{

font-family:'Microsoft Yahei';

}

body,ul{

margin:0px;

padding:0px;

}

ul{list-style:none;}

.menu{

width:200px;

margin:20px auto 0;

}

.menu .level1,.menu li ul a{

display:block;

width:200px;

height:30px;

line-height:30px;

text-decoration:none;

background-color:#3366cc;

color:#fff;

font-size:16px;

text-indent:10px;

}

.menu .level1{

border-bottom:1px solid #afc6f6;

}

.menu li ul a{

font-size:14px;

text-indent:20px;

background-color:#7aa1ef;

}

.menu li ul li{

border-bottom:1px solid #afc6f6;

}

.menu li ul{

display:none;

}

.menu li ul.current{

display:block;

}

.menu li ul li a:hover{

background-color:#f6b544;

}

</style>

$(function(){

//当点击标题的时候

$('.level1').click(function(){

//点击切换展开与收起

$(this).next().toggleClass('current');

})

/*$('.level1').click(function(){

//以下展与上卷方式切换

$(this).next().slideToggle();

});*/

$('.level1').click(function(){

//$(this)是当前点击的a元素

//next()获取a元素的下一个元素，即ul

//slideDown()当前ul的子类展开

//parent()获取父类li

//siblings()获取父类兄弟li

//children('ul')获取其它li的子类ul

//slideUp()其它子类收起

$(this).next().slideDown().parent().siblings().children('ul').slideUp();

});

})

</script>

</head>

<body>

<li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

<li><a href="#">内蒙古羊肉</a></li>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</body>

</html>

jQuery做选项卡；jQuery属性操作；jQuery特殊效果；层级菜单

jQuery做选项卡；jQuery属性操作；jQuery特殊效果；层级菜单

jQuery做选项卡

jQuery属性操作

jQuery特殊效果

层级菜单

推荐阅读更多精彩内容