HTML5系列代码:个人网站-jQuery tab内容列表

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>jQuery tab内容列表</title>
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
<script src="statics/js/jquery.min.js"></script>
</head>

<body>

<div class="bg-grey">
	<div class="content">
		<a href="#">
			<h2 class="title">jQuery tab内容列表</h2></a>
		<p class="subtitle">programb</p>
		<div class="tab-block information-tab">
			<div class="tab-buttons ">
				<h3 class="tab-button cur" data-tab="one">最新头条</h3>
				<h3 class="tab-button" data-tab="two">硬件发烧友</h3>
				<h3 class="tab-button" data-tab="three">家电数码  <span class="question-icon"></span></h3>
			</div>
			<div class="tabs">
				<div class="tab-item active" id="tab-one">
					<div class="information-tab">

						<div class="information-left">
							<a href="#">
								<img src="statics/images/1.png" width="500" height="340" alt="共享经济 活该你倒闭!">
							</a>
							<div class="left-bottom">
								<div class="article-title">programb</div>
								<div class="article-time">
									programb
								</div>
							</div>
						</div>
						<div class="information-right">
							<div class="article-list current">
								<a href="#" class="article-link">
									<div class="article-head">
										<span class="article-number">1</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">2</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">3</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>
                                            programb
										</p>
									</div>
								</a>
							</div>

							<div class="article-list">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">4</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">5</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

						</div>
					</div>
				</div>
				<div class="tab-item" id="tab-two">
					<div class="information-tab ">

						<div class="information-left">
							<a href="#">
								<img src="statics/images/2.png" width="500" height="340" alt="programb">
							</a>
							<div class="left-bottom">
								<div class="article-title">programb</div>
								<div class="article-time">
									programb
								</div>
							</div>
						</div>
						<div class="information-right">
							<div class="article-list current">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">1</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">2</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">3</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">4</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">5</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

						</div>
					</div>
				</div>
				<div class="tab-item" id="tab-three">
					<div class="information-tab ">

						<div class="information-left">
							<a href="#">
								<img src="statics/images/3.png" width="500" height="340" alt="programb">
							</a>
							<div class="left-bottom">
								<div class="article-title">programb</div>
								<div class="article-time">
									programb
								</div>
							</div>
						</div>
						<div class="information-right">
							<div class="article-list current">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">1</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">2</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">3</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">4</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">5</span>
										<span class="article-title">programb</span>
										<span class="article-time">programb</span>
									</div>
									<div class="article-content">
										<p>programb</p>
									</div>
								</a>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	//tab切换		
	$('.tab-button').click(function() {
		var tab = $(this).data('tab')
		$(this).addClass('cur').siblings('.tab-button').removeClass('cur');
		$('#tab-' + tab + '').addClass('active').siblings('.tab-item').removeClass('active');
	});
	//新闻列表切换
	$('.information-tab .article-list').hover(function() {
		$(this).addClass('current').siblings('.article-list').removeClass('current');
	}, function() {
		$(this).parent('.information-right').find('.article-list:first-of-type').addClass('current').siblings('.article-list').removeClass('current');
	});
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

©️2020 CSDN 皮肤主题: 成长之路 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值