续集选择行 - Javascript (1)

📌 相关文章

📜 续集选择行 - Javascript (1)

📅 最后修改于: 2023-12-03 15:27:37.176000 🧑 作者: Mango

续集选择行 - Javascript

介绍

在一些电影、小说、游戏等作品中，经常会出现续集的情况。而在编写程序时，我们有时候也需要根据用户的选择来确定下一步要执行的操作。本文将介绍如何使用Javascript来实现续集选择行的功能。

实现思路

我们可以使用一个对象来存储每个续集的信息，包括续集的名称、简介以及每个续集对应的跳转链接。然后通过Javascript来动态生成页面上的选项卡，用户点击选项卡时，即可跳转到相应的页面。

代码实现

HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>续集选择行 - Javascript</title>
	<meta charset="utf-8">
	<style type="text/css">
		body {
			font-family: Arial, sans-serif;
			padding: 20px;
		}
		h1 {
			text-align: center;
		}
		.tab {
			display: none;
		}
		.active {
			display: block;
		}
		.tab-nav {
			margin: 0;
			padding: 0;
			list-style: none;
			overflow: hidden;
			background-color: #eee;
			border-radius: 4px;
		}
		.tab-nav li {
			float: left;
		}
		.tab-nav a {
			display: block;
			padding: 10px 20px;
			color: #555;
			text-decoration: none;
			border-right: 1px solid #ccc;
		}
		.tab-nav a:hover {
			background-color: #ddd;
		}
		.tab-nav .active a {
			background-color: #fff;
			color: #333;
		}
		.tab-content {
			background-color: #fff;
			border-radius: 4px;
			padding: 20px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		}
		h2 {
			margin-top: 0;
		}
		p {
			margin: 0 0 10px;
			line-height: 1.5;
		}
	</style>
</head>
<body>
	<h1>续集选择行 - Javascript</h1>
	<ul class="tab-nav"></ul>
	<div class="tab-content"></div>
	<script type="text/javascript" src="script.js"></script>
</body>
</html>

Javascript代码

var sequels = [
	{
		title: '《魔戒》系列',
		description: '此系列共三部：《魔戒：护戒使者》、《魔戒：双塔奇兵》、《魔戒：王者归来》。',
		link: 'https://movie.douban.com/subject/1291571/'
	},
	{
		title: '《哈利·波特》系列',
		description: '此系列共七部：《哈利·波特与魔法石》、《哈利·波特与密室》、《哈利·波特与阿兹卡班囚徒》、《哈利·波特与火焰杯》、《哈利·波特与凤凰社》、《哈利·波特与混血王子》、《哈利·波特与死亡圣器（上）》、《哈利·波特与死亡圣器（下）》。',
		link: 'https://movie.douban.com/subject/1305487/'
	},
	{
		title: '《变形金刚》系列',
		description: '此系列共五部：《变形金刚》、《变形金刚2：复仇之战》、《变形金刚3》、《变形金刚4：绝迹重生》、《变形金刚5：最后的骑士》。',
		link: 'https://movie.douban.com/subject/1978709/'
	},
	{
		title: '《速度与激情》系列',
		description: '此系列共九部：《玩命关头》、《2 Fast 2 Furious》、《玩命关头：东京漂移》、《玩命关头4》、《速度与激情5》、《速度与激情6》、《速度与激情7》、《速度与激情8》、《速度与激情9》。',
		link: 'https://movie.douban.com/subject/1794171/'
	}
];

var tabNav = document.querySelector('.tab-nav');
var tabContent = document.querySelector('.tab-content');

for (var i = 0; i < sequels.length; i++) {
	var sequel = sequels[i];

	// 创建选项卡导航
	var tabNavItem = document.createElement('li');
	var tabNavLink = document.createElement('a');

	tabNavLink.textContent = sequel.title;
	tabNavLink.href = '#';
	tabNavLink.addEventListener('click', function(e) {
		e.preventDefault();
		showTab(this);
	});

	tabNavItem.appendChild(tabNavLink);
	tabNav.appendChild(tabNavItem);

	// 创建选项卡面板
	var tabPanel = document.createElement('div');
	var title = document.createElement('h2');
	var description = document.createElement('p');
	var link = document.createElement('a');

	title.textContent = sequel.title;
	description.textContent = sequel.description;
	link.textContent = '查看详情';
	link.href = sequel.link;

	tabPanel.classList.add('tab');
	if (i === 0) {
		tabPanel.classList.add('active');
	}
	tabPanel.appendChild(title);
	tabPanel.appendChild(description);
	tabPanel.appendChild(link);
	tabContent.appendChild(tabPanel);
}

function showTab(tab) {
	var tabPanels = tabContent.querySelectorAll('.tab');
	var tabNavLinks = tabNav.querySelectorAll('a');
	var activeTabPanel = tabContent.querySelector('.active');
	var activeTabNavLink = tabNav.querySelector('.active a');

	activeTabPanel.classList.remove('active');
	activeTabNavLink.classList.remove('active');
	tabPanels[getIndex(tabNavLinks, tab)].classList.add('active');
	tab.classList.add('active');
}

function getIndex(items, item) {
	for (var i = 0; i < items.length; i++) {
		if (items[i] === item) {
			return i;
		}
	}
}

效果预览

总结

本文介绍了如何使用Javascript来实现续集选择行的功能。我们可以使用一个对象来存储每个续集的信息，动态生成页面上的选项卡，用户点击选项卡时，即可跳转到相应的页面。