Kaedah jQuery untuk menambah dan memadam tags_jquery yang ditentukan-tutorial js-php.cn

Kaedah jQuery untuk menambah dan memadam tags_jquery yang ditentukan

WBOY

Lepaskan： 2016-05-16 15:25:27

asal

1676 orang telah melayarinya

Cara jQuery menambah dan mengalih keluar gaya untuk teg tertentu:
Dalam aplikasi sebenar halaman web, gaya elemen CSS perlu diubah mengikut syarat yang berbeza Fungsi ini boleh dicapai dengan menambah dan memadam kelas CSS secara dinamik Berikut adalah contoh cara melaksanakan fungsi ini .
1. Gunakan addClass() dan removeClass() untuk menambah dan mengalih keluar kelas CSS:
Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#add").click(function () {
 $("div").addClass("mytest");
 });
 $("#del").click(function () {
 $("div").removeClass("mytest");
 })
})
</script>
<body>
<div>珍惜当前，因为只有当前才是实实在在的</div>
<button id="add">添加样式</button>
<button id="del">删除样式</button>
</body>
</html>

Salin selepas log masuk

Kod di atas boleh menambah dan memadam gaya yang ditentukan di atas hanyalah demonstrasi dan boleh ditambah atau dipadam mengikut keperluan tertentu.
2. Gunakan toggleClass() untuk bertukar antara menambah dan memadam kelas gaya:
Jika objek yang sepadan mempunyai kelas gaya yang ditentukan, maka toggleClass() boleh memadamkan kelas yang ditentukan, jika tidak, kelas yang ditentukan akan ditambah. Kekuatan kod adalah seperti berikut:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>首页</title> 
<style type="text/css">
.mytest{
 border:1px solid green;
 width:100px;
 height:100px;
 color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
 $("#switch").click(function () {
 $("div").toggleClass("mytest");
 });
})
</script>
<body>
<div class="mytest">珍惜当前，因为只有当前才是实实在在的</div>
<button id="switch">删除与添加切换</button>
</body>
</html>

Salin selepas log masuk

Kod di atas boleh digunakan untuk menukar antara pemadaman dan menambah kelas gaya yang ditentukan Saya harap anda boleh melakukannya sendiri, dan penuaian mungkin lebih besar.