最简单的方法选择的元素

我想知道，如果有可能的风格选择 * 李 *元素以同样的方式你的风格是，当你在它悬停？或者你是否必须使用Javascript来为选定的项目分配一个“活动”类并且像这样设计？

HTML

<div id="areas" class="span2"> 
    <ul> 
     <li><a href="#pretoriaDetail">Pretoria</a> 
     </li> 
     <li><a href="#potchDetail">Potch</a> 
     </li> 
     <li><a href="#jhbDetail">JHB</a> 
     </li> 
    </ul> 
</div> 
<div class="span12"> 
    <div class="hidden" id="pretoriaDetail">Pretoria Content</div> 
    <div class="hidden" id="potchDetail">Potch Content</div> 
    <div class="hidden" id="jhbDetail">JHB Content</div> 
</div>

CSS：

#areas { 
    margin: 0 auto; 
    text-align: center; 
    width: 100px; 

} 
#areas ul { 
    list-style: none; 
} 
#areas ul li { 
    width: 100%; 
    height: 100%; 
    background: #073640; 
    border: 1px solid #aaa; 
    margin: 10px 0px; 
    padding: 20% 10%; 
    /*to vertically center text inside the ul*/ 
    text-align: center; 
} 
#areas ul li:hover { 
    background: #610052; 
} 
#areas ul li a { 
    font-family:'Open Sans', 'Century Gothic', sans-serif; 
    font-size: 28px; 
    color: #fff; 
    line-height: 100%; 
    width: 100%; 
    height: 100%; 
} 
#areasMap { 
} 
.hidden { 
    display: none; 
}

见我fiddle

如果你看一下我的小提琴，悬停级工作正常，但我想保持的元素紫颜色当你真的选择它 - 我可以使用普通的CSS或我必须使用JS？

感谢

来源

2013-02-25 David Van Staden

纠正我，如果我错了，你正在寻找的风格聚焦元素，而不是一个选择的元素。 – 2013-02-25 15:30:56

到风格的.css聚焦的锚最简单的方法？

a:focus {your styling}

像jsFiddle：

#areas ul li a:focus { 
    color: red; 
}

来源

2013-02-25 15:29:21

谢谢你为你的答案。欣赏 – 2013-02-26 04:51:13

ComputerArts的答案会更有用，但是，你回答我的问题 - 是否有一个CSS解决方案？是的，但只有锚标签。欣赏 – 2013-02-26 04:52:36

是的，你需要添加一个类（例如。主动），当你点击它。这将在所有的浏览器

Here's an updated fiddle

JS承认

$(function() { 
    $("#areas ul a").click(function (event) { 
     event.preventDefault(); 
     $("#areas ul li").removeClass('active'); //clears the active class for elements 
     $(this).parent().addClass('active'); //adds the class to clicked li 
     $(".hidden").hide(500); 
     $($(this).attr("href")).show(500) 
    }); 

});

CSS

#areas ul li:hover, 
#areas ul li.active { 
    background: #610052; 
}

来源

2013-02-25 15:08:48

谢谢ComputerArts。好的答案，我将使用它，因为我正在处理li元素，但我认为上面的答案与我的'最简单和最好的css优先'具体问题更相关...我将使用您的代码无论如何，欣赏 – 2013-02-26 04:53:55

最简单的方法选择的元素

回答

相关问题