Question

我有下面的代码，当按下向上和向下箭头时光标应该移动，但由于br标签存在，导航不会按预期发生。当存在中间元素并且我们不想突出显示中间元素时，是否可以有这样的要求。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        <script src="jquery-1.8.3.min.js"></script>
        <script>
            //init
            $('.focused').focus();

            // actual code
            $(document).keydown(function(e) {

                if (e.keyCode == 38) { // left
                    if ($('.focused').prev('.focusable').length) 
                        $('.focused').removeClass('focused').prev('.focusable').focus().addClass('focused');
                }
                if (e.keyCode == 40) { // right
                    if ($('.focused').next('.focusable').length) 
                        $('.focused').removeClass('focused').next('.focusable').focus().addClass('focused');
                }
            });
        </script>
        <style>
            .focused {
                border: 1px solid red;
            }
        </style>
    </head>Comments just added to format the question

    <body>
        Comments just added to format the question 
        <a href='jqwja' class="focusable">jajaj</a>
        Comments just added to format the question<br>
        <a href='jjaasd' class="focusable focused">jajasdaaj</a><br> 
        <a href='jjqwea' class="focusable">jajaacasj</a><br>
        <input value='iddqd' name="DoomII" class="focusable" />
    </body>
</html>

Answer 1

尝试将导航重新格式化为如下所示，并将样式应用于.focus / .focusable a

 <div class="focusable">
   Comments just added to format the question 
   <a href='jqwja' >jajaj</a>
</div>
  <div class="focusable">
   Comments just added to format the question 
   <a href='jqwja' >jajaj</a>
</div>
 <div class="focusable">
       Comments just added to format the question 
       <a href='jqwja' >jajaj</a>
    </div>

导航因br标签无法正常工作

1 个答案: