使用JQ来回切换样式的三种方法

方法一:使用JQ添加和删除相应样式

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height: 600px;
            width: 300px;
            background-color: orange;
        }
        .a{
            background-color: blue;
        }
    style>
    <title>Titletitle>
    <script src="jquery-3.1.1.min.js">script>
head>
<body>
<div id="d">
    sakdas
div>
body>
<script>
    $('#d').mouseover(function () {
        $(this).addClass('a')
    }).mouseout(function () {
        $(this).removeClass('a')
    })
script>
html>
方法二:使用toggleClass,来回跳转样式

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height: 600px;
            width: 300px;
            background-color: orange;
        }
        .a{
            background-color: blue;
        }
    style>
    <title>Titletitle>
    <script src="jquery-3.1.1.min.js">script>
head>
<body>
<div id="d">
    sakdas
div>
body>
<script>
    $('#d').mouseover(function () {
//        俩个状态来回切换
        $(this).toggleClass('a')
    }).mouseout(function () {
        $(this).toggleClass('a')
    })
script>
html>
第三种,点击来回跳转

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            height: 600px;
            width: 300px;
            background-color: orange;
        }
        .a{
            background-color: blue;
        }
    style>
    <title>Titletitle>
    <script src="jquery-3.1.1.min.js">script>
head>
<body>
<div id="d">
    sakdas
div>
body>
<script>
    $('#d').click(function () {
        $(this).toggleClass('a')
    })
script>
html>

你可能感兴趣的:(HTML5)