<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
width: 500px;
border: 1px solid red;
margin: 100px;
}
.title {
display: flex;
align-items: center;
}
.title li {
padding: 10px 0px;
flex: 1;
text-align: center;
border-radius: 5px;
cursor: pointer;
user-select: none;
}
.title li.active {
background: red;
color: #fff;
}
.content li {
display: none;
}
</style>
</head>
<body>
<div class="container">
<ul class="title">
<li class="active">蛋糕</li>
<li>冰淇淋</li>
<li>巧克力</li>
</ul>
<ul class="content">
<li style="display: block;">蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕</li>
<li>冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋</li>
<li>巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力</li>
</ul>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// console.log(document.getElementById('app').offsetTop);
// let apps = document.getElementsByClassName('app')
// for (let i = 0; i < apps.length; i++) {
// apps[i].style.color = 'red'
// }
// console.log(document.getElementsByName('app')[0]);
// console.log(document.getElementsByTagName('div'));
// console.log($('#app').html());
// console.log($('#app').text());
// $('.app').html('<h1>SSSSSSS</h1>')
// $('.app').text('<h1>SSSSSSS</h1>')
// $('.app').css('color', 'red').css('font-size', '30px').css('background', 'orange')
// $('.app').css({
// color: 'red',
// fontSize: 30,
// background: 'orange'
// })
// console.log($('.app').css('color'));
//DomContentLoaded
$(function () {
$('.container li').click(function () {
$(this).addClass('active').siblings('.active').removeClass('active')
$('.content li').eq($(this).index()).show().siblings().hide()
})
//chain
// $('.app').mouseenter(function () {
// $(this).css('color', 'red')
// }).mouseleave(function () {
// $(this).css('color', '#000')
// })
// $('#app .app').css('color', 'blue')
// let app = $('#app')
// app.children().css('color', 'blue')
// app.find('.app').css('color', 'blue')
// $('.app1').click(function () {
// // $(this).parent().parent().remove()
// // $(this).parents('#app').remove()
// $(this).siblings('.app2').remove()
// })
})
// $('.app').click(function () {
// alert(122222)
// })
// console.log($('#app')[0].offsetTop);
// console.log($('#app').get(0).offsetTop);
// console.log($('.app'));
// console.log($('[name="app"]'));
// console.log($('div'));
</script>
</body>
</html>
