Thao tac Jquery với CSS
a. Thiết kế menu như hình H01.
Hình H01.
B1 : Xây dựng menu <DIV>
B2 : Định dạng CSS
b. Định dạng CSS bằng Jquery
- Thay đổi font chữ, màu chữ
Kết quả
- Thay đổi kích thước chữ
Kết quả
- Khi click vào theloai kích thước font chữ loaitin tăng lên
Kết quả
c. Show(), hide(), slideToggle()
- Khi click vào theloai tất cả loaitin sẽ ẩn
Kết quả
- Khi click vào theloai tất cả loaitin sẽ ẩn sau đó hiện ra
Kết quả
- Khi click lần thứ nhất hide, lần thứ hai show ta sử dụng slideToggle()
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="../jquery-3.6.0.js"></script>
<style>
#menu { width:180px; background-color:#cc6; }
#menu .theloai { background-color:#F63; color:#FFFFFF; display:block; padding-top:5px; font-weight:bold}
#menu a{ color:#990000; padding-top:3px; padding-bottom:3px; padding-left:15px; display:block; border-bottom: solid 1px #CFO; text-decoration:none; font-weight:bold;}
#menu a:hover{ color:#FF3300;}
</style>
</head>
<body>
<div id="menu">
<div>
<div class="theloai">Tin xã hội</div>
<div class="loaitin">
<a href="#">Thể thao</a><br/>
<a href="#">Du lịch</a><br/>
<a href="#">Xã hội</a><br/>
<a href="#">Sức khỏe</a><br/>
<a href="#">Âm nhạc</a><br/>
</div>
</div>
<div>
<div class="theloai">Thế giới web</div>
<div class="loaitin">
<a href="#">Tools</a><br/>
<a href="#">Links</a><br/>
<a href="#">Tempalte</a><br/>
<a href="#">Document</a><br/>
</div>
</div>
<div>
<div class="theloai">Nghệ thuật sống</div>
<div class="loaitin">
<a href="#">Sống đẹp</a><br/>
</div>
</div>
<div>
<div class="theloai">Thư giãn</div>
<div class="loaitin">
<a href="#">Thơ hay</a><br/>
<a href="#">Đố vui</a><br/>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
/*$(".loaitin").css({"color":"blue", "font-style":"italic"});*/
/*$(".loaitin").css("font-size", "200%");*/
/*$(".theloai").click(function(){
size = $(".loaitin").css("font-size");
size = parseInt(size);
size = size+2;
$(".loaitin").css("font-size", size);
});*/
$(".theloai").click(function(){
$(".loaitin").hide(1000);
$(".loaitin").show(1000);
$(".loaitin").slideToggle(1000);
});
});
</script>
</body>
</html>
0 comments:
Post a Comment