Javascript 当元素聚焦时，是否更改span和ul的背景色？_Javascript_Jquery_Html_Css

Javascript 当元素聚焦时，是否更改span和ul的背景色？

javascript jquery html css

Javascript 当元素聚焦时，是否更改span和ul的背景色？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我真的需要你的帮助当元素聚焦时，我将如何改变span和ul的背景色？（用户点击？）以下是所需效果的前（左）和后（右）视觉表示：以下是HTML、CSS和jQuery： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="jquery-1.11.3.min.js"&

我真的需要你的帮助

当元素聚焦时，我将如何改变span和ul的背景色？（用户点击？）以下是所需效果的前（左）和后（右）视觉表示：

以下是HTML、CSS和jQuery：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="jquery-1.11.3.min.js"></script>

<script src="IE11support.js"></script>

<style type="text/css">
* {
  font-family: Segoe UI;
  font-size: 9pt;
}
.select {
  margin: 0;
  padding: 0;
}
.select dd, .select dt, .select ul {
  margin: 0px;
  padding: 0px;
}
.select dd {
  position: relative;
}
.select a, .select a:visited {
  color: #000;
  text-decoration: none;
  outline: none;
}
.select dt:hover, .select dd ul:hover {
  border-color: rgb(128,128,128);
}
.select dd ul li a:hover {
  background-color: rgb(112, 146, 190);
  color: #FFF;
}
.select dt {
  background: url(arrow.png) no-repeat scroll right center;
  display: block;
  padding-right: 20px;
  border: 1px solid rgb(170, 170, 170);
  width: 180px;
  overflow: hidden;
}
.select dt span {
  cursor: pointer;
  display: block;
  padding: 4px;
  height: 15px;
}
.select dd ul {
  background: #fff none repeat scroll 0 0;
  border-bottom: 1px solid rgb(170, 170, 170);
  border-left: 1px solid rgb(170, 170, 170);
  border-right: 1px solid rgb(170, 170, 170);
  border-top: 0;
  display: none;
  left: 0px;
  padding: 5px 0px;
  position: absolute;
  top: -1px;
  width: auto;
  min-width: 200px;
  list-style: none;
}
.select dd ul li a {
  padding-left: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
  display: block;
}
.selected {
  background: rgb(195, 195, 195);
}
.header-list, .header-list:hover {
  padding-left: 3px;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
}
</style>

<script type="text/javascript">

$(document).ready(function() {

    $(".select dt").click(function(e) {
        e.stopPropagation();
        var select = $(this).closest('.select');
        select.find('ul').toggle();
        select.find("dt, dd ul").css('border-color', 'rgb(128,128,128)')
    });

    $(".select dd ul li a").click(function(e) {
        var text = $(this).html();
        var select = $(this).closest('.select');

        if ((select.data('val') == 'multiple') && (e.ctrlKey)) {
            e.stopPropagation()
            $(this).addClass('selected');
            select.find('dt span').html("(" + select.find('a.selected').length + ")");
            //select.find('dt span').html(get_data_array(select.find('dd ul').attr('id')).join(",")) Comma-Seperated List
        }
        else {
            var text = $(this).html();
            select.find("dd a").removeClass('selected');
            $(this).addClass('selected');
            select.find("dt span").html(text);
            //select.find("dt a").css("background-color", "");
            select.find("dd ul").hide();
        }
    });

    $(document).bind('click', function() {
        $(".select dd ul").hide();
        $(".select dt, .select dd ul").css('border-color', '');
    });

});
</script>

</head>

<body>

        <dl class="select">
        <dt><span id="vegetables"></span></dt>
        <dd>
            <ul>
                <li><a data-val="" href="#">&nbsp;</a></li>
                <li><a href="#">Carrots</a></li>
                <li><a href="#">Celery</a></li>
                <li><a href="#">Brocoli</a></li>
            </ul>
        </dd>
    </dl>

</body>

</html>


* {
字体系列：SegoeUI；
字号：9pt；
}
.选择{
保证金：0；
填充：0；
}
.选择dd、.选择dt、.选择ul{
边际：0px；
填充：0px；
}
.选择dd{
位置：相对位置；
}
.选择一个，.选择一个：已访问{
颜色：#000；
文字装饰：无；
大纲：无；
}
.选择dt:悬停，.选择dd ul:悬停{
边框颜色：rgb（128128）；
}
.选择dd ul li a：悬停{
背景色：rgb（112146190）；
颜色：#FFF；
}
.选择dt{
背景：url（arrow.png）无重复滚动右中心；
显示：块；
右边填充：20px；
边框：1px实心rgb（170170170）；
宽度：180px；
溢出：隐藏；
}
.选择dt span{
光标：指针；
显示：块；
填充：4px；
高度：15px；
}
.选择dd ul{
背景：#fff无重复滚动0；
边框底部：1px实心rgb（170170170）；
左边框：1px实心rgb（170170170）；
右边框：1px实心rgb（170170170）；
边界顶部：0；
显示：无；
左：0px；
填充：5px0px；
位置：绝对位置；
顶部：-1px；
宽度：自动；
最小宽度：200px；
列表样式：无；
}
.选择dd ul li a{
左侧填充：10px；
垫面：3件；
垫底：3件；
显示：块；
}
.选定{
背景：rgb（195195195195195）；
}
.标题列表，.标题列表：悬停{
左：3倍；
字体大小：粗体；
字体：斜体；
光标：指针；
}
$（文档）.ready（函数（）{
$（“.选择dt”）。单击（函数（e）{
e、 停止传播（）；
var select=$（this）.closest（'.select'）；
select.find（'ul'）.toggle（）；
select.find（“dt，dd ul”）.css（'border-color'，'rgb（128128）'））
});
$（“。选择dd ul li a”）。单击（功能（e）{
var text=$（this.html（）；
var select=$（this）.closest（'.select'）；
if（（select.data（'val'）='multiple'）&&（e.ctrlKey））{
e、 停止传播（）
$（this.addClass（'selected'）；
select.find（'dt span'）.html（“（“+select.find（'a.selected'））.length+”）；
//select.find（'dt span'）.html（获取数据）数组（select.find（'dd ul'）.attr（'id'））.join（“，”）逗号分隔列表
}
否则{
var text=$（this.html（）；
select.find（“dda”）.removeClass（“selected”）；
$（this.addClass（'selected'）；
select.find（“dt span”）.html（文本）；
//select.find（“dta”）.css（“背景色”，“背景色”）；
select.find（“dd ul”）.hide（）；
}
});
$（文档）.bind（'单击'，函数（））{
$（“.select dd ul”）.hide（）；
$（“.select dt，.select dd ul”）.css（'border-color'，”）；
});
});

您可能只需向容器中添加一个类即可

$('ul').on('click', function(){
  $('.select').toggleClass('active');
})

在你的CSS中

.select.active > span {
  background-color: 'yellow';
}

您可能只需要向容器中添加一个类

$('ul').on('click', function(){
  $('.select').toggleClass('active');
})

在你的CSS中

.select.active > span {
  background-color: 'yellow';
}

使元素可聚焦：

<dl tabindex="-1" class="select"><!-- if you want it to have
    a real tab index you can set it to another number -->
    <dt><span id="vegetables"></span></dt>
    <dd>
        <ul>
            <li><a data-val="" href="#">&nbsp;</a></li>
            <li><a href="#">Carrots</a></li>
            <li><a href="#">Celery</a></li>
            <li><a href="#">Brocoli</a></li>
        </ul>
    </dd>
</dl>

使元素可聚焦：

<dl tabindex="-1" class="select"><!-- if you want it to have
    a real tab index you can set it to another number -->
    <dt><span id="vegetables"></span></dt>
    <dd>
        <ul>
            <li><a data-val="" href="#">&nbsp;</a></li>
            <li><a href="#">Carrots</a></li>
            <li><a href="#">Celery</a></li>
            <li><a href="#">Brocoli</a></li>
        </ul>
    </dd>
</dl>

有CSS选择器：hover和：active。在您的例子中，您可以这样做。select:active{background color:yellow；}有CSS选择器：hover和：active。在您的情况下，您可以这样做。选择：active{background color:yellow；}