JS基础——选项卡列表显示隐藏缩略图(函数传参)

CSS部分:

*{ padding: 0; margin: 0;}
	li{ list-style: none; font-size: 12px;}
	a{ text-decoration: none; color: #333;}
	img{ border: none; vertical-align: top;}
	.clearfix{ zoom: 1; }
	.clearfix:after{ clear: both; display: block; content: ""; visibility: hidden; height: 0; }
	#tab{ width: 301px; margin: 20px auto; }
	.tab-bt{ border-top: 2px solid #206F96; border-left: 1px solid #ccc;  height: 30px; line-height: 30px;}
	.tab-bt li{ width: 99px; float: left; text-align: center;  background: #eee; border-right: 1px solid #ccc; font-size: 14px;}
	.tab-bt li a{ display: block;}
	.tab-bt li a.active{ background: #fff;}
	.tab-nr{ display: none;}
	.tab-nr2{ display: none;}
	.tab-nr1{ padding: 15px 10px 0; font-size: 14px;}
	.tab-nr1 a:hover{ color: red; text-decoration: underline;}
	.tab-nr2{ padding: 10px;}
HTML部分:

<div id="tab">
		<ul class="tab-bt">
			<li><a class="active" href="#">选项1</a></li>
			<li><a href="#">选项2</a></li>
			<li><a href="#">选项3</a></li>
		</ul>
		<ul class="tab-nr" style="display:block;">
			<li>
				<div class="tab-nr1">
					<a href="#">1标题文字部分,不显示图片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>1标题文字部分,不显示图片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">1标题文字部分,不显示图片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>1标题文字部分,不显示图片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值