div css,关于li中链接当前选中效果的问题。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div css,关于li中链接当前选中效果的问题。相关的知识，希望对你有一定的参考价值。
参考技术A 我用的是jquery ,希望帮到你，代码如下，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script>
$(document).ready(function()
$("ul li").click(function()
$(this).addClass("cur").siblings().removeClass("cur")
);
);
</script>
<style>
ul width:100px; margin:0; padding:0;
li width:40px; height:25px; line-height:25px; background:#ccc; float:left; list-style:none; margin-left:5px; margin-top:5px;
li a text-decoration:none; color:#000
.cur background:#03F
.cur a color:#fff
</style>
</head>
<body>
<ul>
<li><a href="#">11111</a></li>
<li><a href="#">22222</a></li>
<li><a href="#">33333</a></li>
<li><a href="#">44444</a></li>
</ul>
</body>
</html>本回答被提问者采纳 参考技术B 这个简单，设置li:hoverbackground:green;追问
这种情况不是简单的划过， 是不是得用js控制当时定位到哪一页啊
追答不需要那么麻烦，多个css控制，还是鼠标悬停的问题
参考技术C 写一个当前选中的样式，然后用js调用 参考技术D li:active 第5个回答 2012-03-12 怎么改？基于单选按钮选择使用 CSS 显示/隐藏链接
【中文标题】基于单选按钮选择使用 CSS 显示/隐藏链接【英文标题】：Show/hide links with CSS based on radiobutton selection 【发布时间】：2016-09-20 09:10:39 【问题描述】：我正在尝试根据当前选中的单选按钮显示/隐藏超链接。这一直有效，直到我将单选按钮包装在 <ul><li> 元素中。
CSS
.site
opacity: 0;
height: 0px;
-moz-transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out;
-webkit-transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out;
transition: opacity .5s ease-in-out, height .5s ease-in-out,background .5s ease-in-out;
input[id=rbSites]:checked ~.site
opacity: 1;
height: 15px;
HTML
<input type="radio" id="rbSites" name="types">
<label for="supportCase">Sites</label>
<input type="radio" id="rbOther" name="types">
<label for="other">Other</label>
<div class="cell site">Link to</div>
<a class="site">SiteX</a>
<a class="site">SiteY</a>
<a class="moblie">AppX</a>
一旦单选按钮被包裹在 <ul><li> 元素中，上述内容就会停止工作，如下所示：
<ul>
<li>
<input type="radio" id="rbSites" name="types">
<label for="supportCase">Sites</label>
<input type="radio" id="rbOther" name="types">
<label for="other">Other</label>
</li>
<ul>
参见jsFiddle without <ul><li> 和with <ul><li>。
【问题讨论】：
Is there a CSS parent selector?的可能重复 【参考方案1】：问题是.site 不再是兄弟，所以一旦单选按钮被包裹在<ul><li> 中，~.site 选择器就不起作用了。
您将需要一个额外的父选择器（选择<ul>，然后选择~.site）或选择具有特定子元素（选中的单选按钮）的元素（<ul>）的方法。
很遗憾，恐怕这两个选项都只能在 CSS4 中使用。另请参阅this 和this 的答案。
【讨论】：
以上是关于div css,关于li中链接当前选中效果的问题。的主要内容，如果未能解决你的问题，请参考以下文章