0

我正在研究两种获得可选图像的方法，我想知道哪种解决方案最容易被尽可能多的用户访问。一种是使用 jQuery toggleClass

<html><head>
    <style type="text/css">
        img {
           padding: 10px;
           margin: 25px;
           float: left;
           background-color: #99BC99;
        }
        img.selected {
            background-color: #E13300;
        }
    </style>
    <script type="text/javascript" src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function() {
            $('img').click(function(){
                $(this).toggleClass('selected');
            });
        });
    </script>
</head><body>
    <img src="images/image0.jpg">
    <img src="images/image1.jpg">
    <img src="images/image2.jpg">
    <img src="images/image3.jpg">
    <img src="images/image4.jpg">
    <img src="images/image5.jpg">
    <img src="images/image6.jpg">
    <img src="images/image7.jpg">
    <img src="images/image8.jpg">
</body></html>

另一种方法使用没有javascript的html和css

<html><head>
    <style>
    input[type=checkbox] {
        display:none;
    }
    input[type=checkbox] + label {
        padding: 10px;
        margin: 25px;
        background-color: #99BC99;
        float: left;
    }
    input[type=checkbox]:checked + label {
        padding: 10px;
        margin: 25px;
        background-color: #E13300;
        float: left;
    }
    </style>
</head><body>
    <input type='checkbox'  value='image0' id="image0"/>
    <label for="image0"><img src="images/image0.jpg"></img></label>
    <input type='checkbox' value='image1' id="image1"/>
    <label for="image1"><img src="images/image1.jpg"></img></label>
    <input type='checkbox' value='image2' id="image2"/>
    <label for="image2"><img src="images/image2.jpg"></img></label>
    <input type='checkbox' value='image3' id="image3"/>
    <label for="image3"><img src="images/image3.jpg"></img></label>
    <input type='checkbox' value='image4' id="image4"/>
    <label for="image4"><img src="images/image4.jpg"></img></label>
    <input type='checkbox' value='image5' id="image5"/>
    <label for="image5"><img src="images/image5.jpg"></img></label>
    <input type='checkbox' value='image6' id="image6"/>
    <label for="image6"><img src="images/image6.jpg"></img></label>
    <input type='checkbox' value='image7' id="image7"/>
    <label for="image7"><img src="images/image7.jpg"></img></label>
    <input type='checkbox' value='image8' id="image8"/>
    <label for="image8"><img src="images/image8.jpg"></img></label>
</body></html>

如果有的话，这两种关于可访问性的方法之间会有什么区别？

4

1 回答 1

1

我知道有些人会阻止 javascript，所以我猜第二个选项是最容易访问的？

不管怎样，使用 javascript 让它看起来更漂亮，所以你应该做一些没有 javascript 的东西，然后在上面放一个 javascript 层。所以当人们关闭他们的javascript时它仍然有效。

于 2012-05-15T02:11:07.067 回答