选择时更改背景颜色

Question

我创建了导航，您可以使用箭头键选择导航，但我仍然需要取消对#header_search_bar_input的重点，并更改用户选择的导航背景。

网站： http://gyazo.com/68cd4fa85a42e604a35ab25548d15235

JS：

var selected = 0;


                $(window).keydown(function(e){
                    var lenght = $('[id^=fclink_]').length;

                    if(e.which === 40){
                        selected++;
                        if(selected > lenght) {
                            selected = 0;
                        }
                    }else if(e.which === 38){
                        selected--;
                        if(selected < 0) {
                            selected = lenght;
                        }
                    }else if(e.which === 13){
                        string = '#fclink_';
                        num = selected.toString();
                        var href = $(string.concat(num)).attr('href');
                        window.location.href = href;
                    }

                    if(selected == 0) {
                        document.getElementById('header_search_bar_input').focus();
                    } else {

                    }
                });

HTML：

<li id="header_search_bar_container">
            <ul id="header_search_bar">
                <form action="index.php" method="post">
                    <input type="text" name="search_query" id="header_search_bar_input" autocomplete="off" onkeyup="autosuggest()">
                    <input type="submit" id="header_search_bar_submit" value="">
                </form>
            </ul>
            <div id="header_show_auto_suggest"><a href="forecast.php?location=3" id="fclink_1">
                        <ul id="header_search_bar_auto_suggest" style="border-top: solid 1px #dddddd;" class="fcfocus_1">
                        <p id="header_search_bar_text">
                            Akranes, Iceland
                        </p>
                        <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
                    </ul>
                    </a><a href="forecast.php?location=1" id="fclink_2">
                    <ul id="header_search_bar_auto_suggest" class="fcfocus_2">
                        <p id="header_search_bar_text">
                            Akureyri, Iceland
                        </p>
                        <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
                       </ul>
                       </a><a href="forecast.php?location=2" id="fclink_3">
                    <ul id="header_search_bar_auto_suggest" class="fcfocus_3">
                        <p id="header_search_bar_text">
                            Reykjavík, Iceland
                        </p>
                        <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
                       </ul>
                       </a></div>
        </li>

请让我知道改变背景颜色的正确方法。

Answer 1

正如您在代码中使用jQuery一样，这里是改变背景颜色的jQuery方法：

$("yourselector").css("background-color", "red");

Answer 2

  

注意：您的HTML结构笨拙且无效（例如：p和form不应是ul的子项。虽然这个解决方案可以使用上面的代码，但我强烈建议您重新构建使其有效的代码（然后重新调整下面的解决方案以使其适应新代码）。它将更加强大，您将避免跨浏览器问题，并且您（或任何继承您的代码）将更容易维护和调试。

有不同的方式来实现你想要的。例如，您可以按照以下简单步骤来完成：

• 创建两个CSS规则：
  • 当选项未激活时（白色背景）
  • 选项处于活动状态时的Antoher（例如，带灰色背景）
• 修改您的JavaScript代码，以便：
  • 选择向上/向下键时，请删除active类。
  • 当selected不为0时，将班级active添加到nth-child(selected)

像这样（我使用自动缩进来清理它并使其更具可读性，但它上面的代码相同，只添加了4行）：

＆＃13;

＆＃13;

var selected = 0;


$(window).keydown(function(e){
  var lenght = $('[id^=fclink_]').length;

  if(e.which === 40){
    selected++;
    if(selected > lenght) {
      selected = 0;
    }
    
    // ADDED CODE - remove the active class when up/down was pressed
    $("#header_show_auto_suggest a ul").removeClass("active");
    
  }else if(e.which === 38){
    selected--;
    if(selected < 0) {
      selected = lenght;
    }
    
    // ADDED CODE - remove the active class when up/down was pressed
    $("#header_show_auto_suggest a ul").removeClass("active");
    
  }else if(e.which === 13){
    string = '#fclink_';
    num = selected.toString();
    var href = $(string.concat(num)).attr('href');
    window.location.href = href;
  }

  if(selected == 0) {
    document.getElementById('header_search_bar_input').focus();
  } else {

    // ADDED CODE - add the active class to the currently active element
    $("#header_show_auto_suggest a:nth-child(" + selected + ") ul").addClass("active");
    
  }
});

＆＃13;

/** ADDED CODE - Styles for active/inactive elements **/
#header_show_auto_suggest a ul {
    background:white;
}

#header_show_auto_suggest a ul.active {
    background:#f0f0f0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li id="header_search_bar_container">
  <ul id="header_search_bar">
    <form action="index.php" method="post">
      <input type="text" name="search_query" id="header_search_bar_input" autocomplete="off" onkeyup="autosuggest()">
      <input type="submit" id="header_search_bar_submit" value="">
    </form>
  </ul>
  <div id="header_show_auto_suggest"><a href="forecast.php?location=3" id="fclink_1">
    <ul id="header_search_bar_auto_suggest" style="border-top: solid 1px #dddddd;" class="fcfocus_1">
      <p id="header_search_bar_text">
        Akranes, Iceland
      </p>
      <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
    </ul>
    </a><a href="forecast.php?location=1" id="fclink_2">
    <ul id="header_search_bar_auto_suggest" class="fcfocus_2">
      <p id="header_search_bar_text">
        Akureyri, Iceland
      </p>
      <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
    </ul>
    </a><a href="forecast.php?location=2" id="fclink_3">
    <ul id="header_search_bar_auto_suggest" class="fcfocus_3">
      <p id="header_search_bar_text">
        Reykjavík, Iceland
      </p>
      <img src="images/flags/IS.png" id="header_search_bar_img" width="28px" height="28px">
    </ul>
    </a></div>
</li>

＆＃13;

＆＃13;

＆＃13;

只更改了四行代码（您可以通过前面的ADDED CODE注释来识别它们）。但同样，你应该认真考虑重组代码。