css 切换a href

实现原理利用:target,把a标签自身的href以及id设置成一样的

点击    我是P1的内容

后变为 我是P2的内容

---------------------------------------------------------------------------

<!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>
</head>
<style>
body,div{margin:0;padding:0;}
#box>a{display:none;}
#box>a:first-of-type{display:block;}
#box>a:target{display:none;}
#box>a:target + a{display:block;}
</style>
<body>

<div id="box"> <a href="#a" id="a"> <p>我是P1的内容</p></a>
<a href="#b" id="b"><p>我是P2的内容</p> </a>
</div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/ozhy111/article/details/84399191