jquery动态给button添加active无效

jquery动态给button添加active无效,第1张

这是因为点击button后,外层的a标签也会被触发,然后页面就刷新了,css效果也肯定就“一夜回到解放前”了。

js代码可改为:

$(function(){

   $('#button button').click(function(){

      $('#button button').removeClass("active")

      $(this).addClass('active')

      return false  //加这行!

   })

})

给你一个简单的原生html5实现的例子吧。没有使用jquery。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        li {

            display: inline-block

            width: 100%

            height: 30px

            line-height: 30px

        }

        li:active, li:focus, .li-active {

            background: #dddddd

            color: red

        }

    </style>

    <script type="text/javascript">

        onload = function () {

            function removeActiveClass(node) {

                node.className = ''

            }

            document.querySelector('ul[id=test]').onclick = function (e) {

                Array.prototype.forEach.call(document.querySelectorAll('ul[id=test] > li'), removeActiveClass)

                var target = e.target

                target.className = 'li-active'

            }

        }

    </script>

</head>

<body>

<ul id="test">

    <li>1111</li>

    <li>2222</li>

    <li>3333</li>

    <li>4444</li>

</ul>

</body>

</html>

很简单。

if(location.href=='1.html'){

    $('.hexagon-in2').addClass('.active')

}


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11581207.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-17
下一篇2023-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存