首页 > 代码库 > 怎样在a标签上加点击事件，实现页面跳转，并在目标页面内显示出某个隐藏的div？

怎样在a标签上加点击事件，实现页面跳转，并在目标页面内显示出某个隐藏的div？

2024-08-13 23:08:48   219人阅读

 
target伪类实现下面效果，缺点只有IE9及以上支持
怎样在a标签上加点击事件，实现页面跳转，并在目标页面内显示出某个隐藏的div？
技术分享
主页面：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>target伪类</title>
</head>
<body>
<a href="http://www.mamicode.com/1.html#div1" target="_blank" >div1</a>
<a href="http://www.mamicode.com/1.html#div2" target="_blank" >div2</a>
<a href="http://www.mamicode.com/1.html#div3" target="_blank" >div3</a>
</body>
</html>
目标页面：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>目标页面</title>
<style>
div{width:300px;height:200px;background:#000; font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;}
div:target{ display:block;background:red;}
</style>
</head>
<body>
<a href="http://www.mamicode.com/1.html#div1">div1</a>
<a href="http://www.mamicode.com/1.html#div2">div2</a>
<a href="http://www.mamicode.com/1.html#div3">div3</a>
<div id="div1" >div11111</div>
<div id="div2" >div2--222--</div>
<div id="div3" >div3--333--</div>
</body>
</html>
 

怎样在a标签上加点击事件，实现页面跳转，并在目标页面内显示出某个隐藏的div？


联系
我们