在ASP.NET MVC视图中添加误差中的tuggle aria-presse = true/false

我必须切换 .Active Bootstrap的类和 aria-presse = true/fals/false 处理ASP.NET MVC中的可访问性当我单击按钮时查看。我已经将单击按钮的Active和Aria置于true中，用于其余按钮。我已经完成了以下代码来更改CSS className和属性。CSS类。活动正常，但我收到一个错误，如

"未经定义在htmlbuttonelement。"

您能帮我解决错误吗？

@{
    Layout = null;
}
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>MyTest</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        <script type="text/javascript">
            $(document).ready(function () {
                var btnContainer = document.getElementById("containerDiv");
                // Get all buttons with class="btn" inside the container
                var btns = btnContainer.getElementsByClassName("btn");
                // Loop through the buttons and add the active class to the current/clicked button
                for (var i = 0; i < btns.length; i++) {
                    btns[i].addEventListener("click", function () {
                        var current = document.getElementsByClassName("active");
                        // If there's no active class
                        if (current.length > 0) {
                            current[0].className = current[0].className.replace(" active", "");
                            current[0].setAttribute("aria-pressed", "false");
                        }
                        // Add the active class to the current/clicked button
                        this.className += " active";
                        this.setAttribute("aria-pressed", "true");
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="containerDiv">
            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 1
            </button>
            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 2
            </button>
            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 3
            </button>
            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 4
            </button>
            <button class="btn btn-primary" type="button" aria-pressed="false">
                Product 5
            </button>
        </div>
    </body>
    </html>

哇，所有代码都可以实现！您已经在使用jQuery，所以为什么不尝试这样的事情（删除所有JavaScript代码并用此替换）：

<script type="text/javascript">
    $(document).ready(function () {
        $("#containerDiv .btn").click(function () {
            $("#containerDiv .btn").attr("aria-pressed", false)
            $("#containerDiv .btn").removeClass("active")
            $(this).attr("aria-pressed", true)
            $(this).addClass("active")
        });
    });
</script>

相关内容

最新更新

热门标签：