在HTML中,3个<a>标签结合CSS如何实现点击不同<a>标签时效果不同?

额您看了标题可能有些乱,我在这里详细说吧。
这里有
<a id="a1">A1</a>
<a id="a2">A2</a>
<a id="a3">A3</a>
3个<a>标签。背景默认灰色。现在想实现的是,点击其中一个,背景变红色;当再次点击另一个时,刚刚点击的恢复原来的灰色,这次点击的背景变红色。

能明白我的意思吗?无论怎样,点击后背景变红色,点另一个后恢复原来的颜色。。就这样

我需要一段CSS的代码

这种用CSS是没办法实现的,CSS只能为实现 #a1:visited 属性,实现点击后变色,像你说的这种只能用jquery 来遍历容器中的属性,然后根据点击来判断后添加颜色!追问

我想实现的效果,就是阿里云点击的这种,您看下。

追答

恩 你直接截图这个不就懂了这个点击事件啊,所有的A标签实现




他实现的思路是,点击按钮 button  时候 循环遍历容易中的button 然后 确定点击的按钮,添加CLASS 属性bk-button-current  这样就可以了,如果你有js 或者jquery的基础的,实现很简单,如果不行的话 我帮你写一个!

温馨提示:内容为网友见解,仅供参考
无其他回答

在HTML中,3个<a>标签结合CSS如何实现点击不同<a>标签时效果不同?
这种用CSS是没办法实现的,CSS只能为实现 #a1:visited 属性,实现点击后变色,像你说的这种只能用jquery 来遍历容器中的属性,然后根据点击来判断后添加颜色!

HTML一个页面有多个a标签,怎么写才能让a标签显示不同的样式
方法一、给每一个a标签定义不同的ID值,举个栗子:<!--定义以下样式:--><style type="text\/css">\/*以 # 开头的样式为“ID”只可以用在一个标签上*\/#one{color:red;}#two{color:orange;}\/*以 . 点点开头的样式为“类”可以用在多个标签上*\/.lei{ \/*颜色代码也可以*\/ color:#...

HTML一个页面有多个a标签,怎么写才能让a标签显示不同的样式
<a class="xiao" href="#">第一个链接<\/a> <a class="da" href="#">第二个链接<\/a> 那我在这个页面分别定义了两个类,如下:<style type="text\/css"> .xiao { font-size: 10px;} .da { font-size: 24px;} <\/style> 就OK了,完整的HTML代码如下:<html> <head> <title>测...

多个<a>之间设置css
<body> 下面效果是加了CSS样式改变后的 <div class="css"><a href="1" title="1">1<\/a><img src="\/a.gif"\/><a href="2" title="2">2<\/a><img src="\/a.gif"\/><a href="2" title="2">2<\/a><img src="\/a.gif"\/><\/div> <br><br> 下面效果是没加CSS样式 <div ...

php如何实现点击不同a链接,控制网页显示不同div
php $Dom = array(); for( $i = 1; $i <= 3; $i++ ){ $Dom[$i] = '<div id="' . $i . '">这是第' . $i . '个Div标签内容<\/div>'; } $ID = $_GET['id']; echo !empty( $ID ) && is_numeric( $ID ) && $ID > 0 ? $Dom[$ID] : '';...

三个不同按扭的html代码和CSS样式怎么写?
例如:.ipt{width:200px;} .ipt1{width:300px;} 你说你的第三个设置了.input就可以了,就是因为你在里面加了两个类名,其中一个类名是input,在前面加点就是类名的写法。加#号就是id的写法,你应该去学习一下css选择器方面的知识,这些是基础来的。

在一个<td>里面的几个<a>都要给他加一个相同的样式,css怎么写
如果你的TD有id的话, 这样很简单, 假定id="td1", 样式可以这么写。td1 a{ \/\/your style.} 如果你希望所有的td下面所有a标记都使用同一样式的话。可以这么写。td a{ \/\/your style.} 如果你的TD属于某一个容器,假定容器或者TABALE, 假定其ID为div1,那么样式可以这么写。div1 td a{ \/...

html中css样式 <a>标签的使用
3、html a应用扩展:同页面锚文本-同页面内上下转到指定位置;常常看见我们页面底部点击 “回到顶部”链接就会转到网页顶部实现。Exp:(1)、首先我们在网页body内最上面添加一个<span id="top" name="top"><\/span>;(2)、我们再到body内,需要出现点击后转到顶部位置添加,<a href="#top">...

如何实现 css 鼠标点击a标签由样式1变为样式2
text-decoration: none; display: block; float: left; text-align: center; line-height: 50px; } .on{ border:1px solid #ccc;} <\/style> <script> $(function(){ $(".menu a").click(function(){ $(this).addClass("on").siblings().removeClass...

HTML css <a>标签点击后样式
a:hover{text-decoration:none;\/*指鼠标在链接*\/} a:active{text-decoration:none;\/* 指正在点的链接*\/ } 把这些的颜色都设置一下便可以解决。一个网页对应多个 HTML文件, 超文本标记语言文件以.htm(磁盘操作系统 DOS限制的外语缩写)为 扩展名或.html(外语缩写)为 扩展名。可以使用任何能够...

相似回答