javascript中.toggleClass()怎么用

發(fā)布時間：2022-03-05 11:23:46 來源：億速云閱讀：200 作者：小新欄目：web開發(fā)

這篇文章主要介紹javascript中.toggleClass()怎么用，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　如果匹配元素的父級元素有bar樣式類名，這個例子將為<div class="foo">元素切換 happy 樣式類；否則他將切換 sad 樣式類。

　　例子:

　　Example: 當(dāng)點擊段落的是有切換 'highlight' 樣式類

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<style>

　　p { margin: 4px; font-size:16px; font-weight:bolder;

　　cursor:pointer; }

　　.blue { color:blue; }

　　.highlight { background:yellow; }

　　</style>

　　</head>

　　<body>

　　<p class="blue">Click to toggle</p>

　　<p class="blue highlight">highlight</p>

　　<p class="blue">on these</p>

　　<p class="blue">paragraphs</p>

　　$("p").click(function () {

　　$(this).toggleClass("highlight");

　　});

　　</script>

　　</body>

　　</html>

　　Example: 每當(dāng)?shù)谌吸c擊段落的時候添加 "highlight" 樣式類, 第一次和第二次點擊的時候移除 "highlight" 樣式類

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<style>

　　p { margin: 4px; font-size:16px; font-weight:bolder;

　　cursor:pointer; }

　　.blue { color:blue; }

　　.highlight { background:red; }

　　</style>

　　</head>

　　<body>

　　<p class="blue">Click to toggle (<span>clicks: 0</span>)</p>

　　<p class="blue highlight">highlight (<span>clicks: 0</span>)</p>

　　<p class="blue">on these (<span>clicks: 0</span>)</p>

　　<p class="blue">paragraphs (<span>clicks: 0</span>)</p>

　　var count = 0;

　　$("p").each(function() {

　　var $thisParagraph = $(this);

　　var count = 0;

　　$thisParagraph.click(function() {

　　count++;

　　$thisParagraph.find("span").text('clicks: ' + count);

　　$thisParagraph.toggleClass("highlight", count % 3 == 0);

　　});

　　</script>

　　</body>

　　</html>

　　Example: Toggle the class name(s) indicated on the buttons for each div.

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<style>

　　.wrap > div { float: left; width: 100px; margin: 1em 1em 0 0;

　　padding=left: 3px; border: 1px solid #abc; }

　　div.a { background-color: aqua; }

　　div.b { background-color: burlywood; }

　　div.c { background-color: cornsilk; }

　　</style>

　　</head>

　　<body>

　　<button>toggle</button>

　　<button class="a">toggle a</button>

　　<button class="a b">toggle a b</button>

　　<button class="a b c">toggle a b c</button>

　　<a href="#">reset</a>

　　</div>

　　</div>

　　var cls = ['', 'a', 'a b', 'a b c'];

　　var divs = $('div.wrap').children();

　　var appendClass = function() {

　　divs.append(function() {

　　return '<div>' + (this.className || 'none') + '</div>';

　　});

　　};

　　appendClass();

　　$('button').bind('click', function() {

　　var tc = this.className || undefined;

　　divs.toggleClass(tc);

　　appendClass();

　　});

　　$('a').bind('click', function(event) {

　　event.preventDefault();

　　divs.empty().each(function(i) {

　　this.className = cls[i];

　　});

　　appendClass();

　　});

　　</script>

　　</body>

　　</html>

以上是“javascript中.toggleClass()怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

javascript中.toggleClass()怎么用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽