用css 能实现导航栏点击与内容的切换嘛

小白萌新 2019-09-24 02:58:46
右边div放导航栏,左边div放切换内容
...全文
852 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
咕叽鸟 2020-08-24
  • 打赏
  • 举报
回复
引用 9 楼 满目山河。 的回复:
.sel input:checked + div {} 加粗字体的语句是什么意思呀?求告知
和选中状态的input相邻的后一个div
满目山河。 2020-08-24
  • 打赏
  • 举报
回复
.sel input:checked + div {} 加粗字体的语句是什么意思呀?求告知
qq_605010527 2020-05-20
  • 打赏
  • 举报
回复
<div id="symantecSeal" style="text-align:center;" title="单击即可验证 - 该站点选择 Symantec SSL 实现安全的电子商务和机密通信"> <script type="text/javascript" src="https://seal.verisign.com/getseal?host_name=https://m.01238006.com/&size=M&use_flash=YES&use_transparent=YES&lang=zh_cn"></script> </div>
qq_605010527 2020-05-20
  • 打赏
  • 举报
回复
<div id="symantecSeal" style="text-align:center;" title="单击即可验证 - 该站点选择 Symantec SSL 实现安全的电子商务和机密通信"> <script type="text/javascript" src="https://seal.verisign.com/getseal?host_name=https://m.01238006.com/&size=M&use_flash=YES&use_transparent=YES&lang=zh_cn"></script> </div>
qq_605010527 2020-05-20
  • 打赏
  • 举报
回复
<div id="symantecSeal" style="text-align:center;" title="单击即可验证 - 该站点选择 Symantec SSL 实现安全的电子商务和机密通信"> <script type="text/javascript" src="https://seal.verisign.com/getseal?host_name=https://m.01238006.com/&size=M&use_flash=YES&use_transparent=YES&lang=zh_cn"></script> </div>
天际的海浪 2019-09-30
  • 打赏
  • 举报
回复
只用css的

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
.sel input , .sel div {
	display: none;
}
.sel input:checked + div {
	display: block;
}
</style>
</head>
<body>

<div class="sel">
	<label for="id1">菜单·1</label>
	<label for="id2">菜单·2</label>
	<label for="id3">菜单·3</label>
	<input type="radio" name="sel" id="id1" checked="checked" />
	<div>
		内容--1
	</div>
	<input type="radio" name="sel" id="id2" />
	<div>
		内容--2
	</div>
	<input type="radio" name="sel" id="id3" />
	<div>
		内容--3
	</div>
</div>
</body>
</html>
葉幺 2019-09-30
  • 打赏
  • 举报
回复
css好像只能经过时切换,点击的话除了链接就是用js
冥冥自有定数 2019-09-29
  • 打赏
  • 举报
回复
是需要用到js的,js是实现网站的动态效果。
狗蛋丶 2019-09-24
  • 打赏
  • 举报
回复
可以,需要一点类似Hack的代码。 有很多纯CSS写Tab导航条的代码可以参考
jio可 2019-09-24
  • 打赏
  • 举报
回复
用js也是操作css的隐藏显示

61,111

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧