jqueyli点击单个样式,其他li样式不变

2019-03-18  本文已影响0人  青木川_

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>

    <style type="text/css">

        .main {

            float: left;

            width: 100%;

            height: auto;

            list-style: none;

            text-align: center;

        }

            .main li {

                float: left;

                width: 33%;

                height: 25px;

                border: 1px solid #DEDEDE;

                cursor: pointer;

            }

    </style>

</head>

<body>

    <ul class="main">

        <li>同意</li>

        <li>通过</li>

        <li>结果</li>

    </ul>

    <script type="text/javascript">

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

            $("li").css({ "color": "#555555", "background-color":"transparent" });//首先将全部的背景色,设置为透明的

            $(this).css({ "color": "#FFFFFF", "background-color": "#009688" });//单个点击的赋值颜色

        });

    </script>

</body>

</html>

上一篇 下一篇

猜你喜欢

热点阅读