cari

Rumah >hujung hadapan web >tutorial js >Kaedah jQuery untuk menambah dan memadam tags_jquery yang ditentukan

Kaedah jQuery untuk menambah dan memadam tags_jquery yang ditentukan

WBOY
WBOYasal
2016-05-16 15:25:271709semak imbas

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>

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Melaksanakan kesan khas hubungan wilayah dan perbandaran berdasarkan jquery_jqueryArtikel seterusnya：Melaksanakan kesan khas hubungan wilayah dan perbandaran berdasarkan jquery_jquery

Artikel berkaitan

Lihat lagi