tab切换demo
效果：
image.png
代码：
<html lang='en'>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<!-- 课堂笔记
<ul>
<li>1</li>
<li><span>2</span></li>
<li class='demo'>3</li>
<li>4</li>
<li id='demos'>5</li>
</ul> -->
<!-- 选项卡 -->
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
.window{
display: inline-block;
width: 252px;
height: 200px;
border: 0.1px solid #dfdfdf;
}
.button{
height: 25px;
background-color: #f40;
}
button{
width: 33.33%;
height: 100%;
font-size: 12px;
color: white;
background-color: #f40;
border: 0.1px solid #dfdfdf;
}
.button .btn1{
background-color: green;
}
.content div{
display: none;
}
.content .text1{
display: block;
}
</style>
<div class='window'>
<div class='button'>
<button class='btn1'>name</button><button class='btn2'>sex</button><button class='btn3'>age</button>
</div>
<div class='content'>
<div class='text1'>BYRON</div>
<div class='text2'>MALE</div>
<div class='text3'>20</div>
</div>
</div>
<script type="text/javascript" src='jquery-3.2.1.js'></script>
<script type="text/javascript">
// // ************************选项卡****************************
$('button').click(function(){
for(var i = 0; i < $('button').length; i++){
if($('button').eq(i)[0] == this){
$(this).css('background-color','green');
$('.content div').eq(i).css('display','block');
}else{
$('.content div').eq(i).css('display','none');
$('button').eq(i).css('background-color','#f40');
}
}
})
// if(this){
// $(this).css('background-color','green');
// console.log(1);
// }else{
// console(2)
// $(this).css('background-color','#f40');
// }
// $(this).css('background-color','green');
// var cont = $(this).html();
// $('.window .content').html(cont);
// **************************************************
// $('.content div')
// ************************课堂笔记****************************
// var oLi = document.getElementsByTagName('li');
// var oLi = document.getElementsByTagName('li');
// $('li').click(function(){
// console.log($(this).html());
// })
// console.log($('li'));
// $('li').css('background', 'red');
// (function (){
// window.jQuary = jQuary;
// window.$ = window.jQuary;
// function jQuary (selector){
// return new jQuary.prototype.init(selector)
// }
// jQuary.prototype.init = function(selector){
// var oDom = document.getElementsByTagName('li');
// for(var i = 0; i < oDom.length; i ++){
// this[i] = oDom[i];
// }
// return this;
// }
// jQuary.prototype.css = function(){
// console.log('css');
// return this;
// }
// jQuary.prototype.init.prototype = jQuary.prototype;
// })()
// $('li').css();
// 选择dom结构
// $('ul li');
// $('ul > li');
// $('ul > li:first').css('background', 'orange');
// $('ul>li:eq(2)').css('background', 'green');
// $('ul>li:odd/even').css('background', 'blue');
// $('ul>li').filter(function(index){ //not和其相反
// return index % 3;
// }).css('background', 'red');
// $('ul > li').has('span').css('background', 'red');
// $('ul>li').find('span').css('background', 'red');
// jQuery函数写法
// oLi[0].innerText = '<p>22</p>'; -->text
// oLi[0].innerHtml = '<p>22</p>'; -->html()
// $('li').eq(0).html('<p>22</p>');
// $('li').eq(0).html('');//取值一个，text取一组
// click(function(){});//绑定事件
// attr();返回属性值
// prop();返回true或false
</script>
</body>
</html>
效果：
第一张
第二张
代码：
<html lang='en'>
<head>
<meta charset='utf-8'>
<title></title>
</head>
<body>
<div class="wrapper">
<div class="dox">
<button class='active'>a</button>
<button>b</button>
<button>c</button>
</div>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
<script type="text/javascript" src='jquery-3.2.1.js'></script>
<script type="text/javascript">
$('.content div').eq(0).css({display:'block'});
$('button').click(function(){
$('.active').removeClass();
$(this).addClass('active');
var aa = $(this).index();
$('.content div').css('display', 'none');
$('.content div').eq(aa).css('display','block');
})
</script>
</body>
</html>
网友评论