如何制作更新内容区？
Posted
技术标签:
【中文标题】如何制作更新内容区？【英文标题】：How to make an updating content area? 【发布时间】：2020-05-10 18:05:31 【问题描述】：我想做的事
我正在制作一个电影演示网站，我有四个电影海报面板，显示海报、标题和放映时间，这些应该是可点击的。
当有人点击任何一个面板时，我的意图是在面板下方填充文本和预告片视频的区域根据点击的面板更新/替换其内容。其他三个区域应该是隐藏的。
我已经制作了面板和容器区域，但我还没有弄清楚如何让内容被替换。
我尝试过的/编码
我发现了类似的问题，例如this one，但我发现的问题都没有完全回答我的问题。
感谢您的帮助！
这是我的面板代码：
/* Panels */
.panel
border: 1px solid #333;
border-radius: 15px;
width: 70%;
margin: 0 auto;
margin-bottom: 2rem;
.panel h3
font-size: 1.2rem;
.panel h3,
p
padding-top: 0.5rem;
padding-left: 1rem;
padding-bottom: 0.5rem;
.poster
display: block;
border-radius: 15px;
margin-top: 1rem;
margin-left: auto;
margin-right: auto;
.title
color: gold;
.schedule
font-family: "Libre Baskerville";
font-size: 0.8rem;
.schedule p
color: white;
/* Synopsis Area */
.synopsis
border: 1px solid #333;
border-radius: 15px;
height: 90%;
width: 80%;
margin: 0 auto;
padding: 1rem;
display: none;
.movie-title
color: gold;
font-size: 1.2rem;
padding-top: 1rem;
padding-left: 1rem;
padding-bottom: 0;
.movie-desc
font-family: "Libre Baskerville";
width: 80%;
padding: 1rem;
.screening-buttons p
margin-bottom: 0.5rem;
.screening-buttons a
font-size: 0.8rem;
background-color: #333;
border-radius: 5px;
padding: 0.6rem;
margin-right: 0.7rem;
.screening-buttons a:hover
color: black;
background-color: #bfbfbf;
transition: 0.6s;
<div class="panel-group">
<div class="panel">
<a href="#movie-one">
<div class="left">
<img src="../../media/poster.jpg" height=355 width=240 class="poster">
</div>
<h3 class="title">Movie Title (PG)</h3>
<div class="schedule">
<p>Monday - 12PM</p>
<p>Tuesday - 12PM</p>
<p>Wednesday - 6PM</p>
<p>Thursday - 6PM</p>
<p>Friday - 6PM</p>
<p>Saturday - 12PM</p>
<p>Sunday - 12PM</p>
</div>
</a>
</div>
<div class="panel">
<a href="#movie-two">
<div class="left">
<img src="../../media/poster.jpg" height=355 width=240 class="poster">
</div>
<h3 class="title">Movie Title (PG)</h3>
<div class="schedule">
<p>Wednesday - 9PM</p>
<p>Thursday - 9PM</p>
<p>Friday - 9PM</p>
<p>Saturday - 6PM</p>
<p>Sunday - 6PM</p>
</div>
</a>
</div>
</div>
<div class="panel-group">
<div class="panel">
<a href="#movie-three">
<div class="left">
<img src="../../media/poster.jpg" height=355 width=240 class="poster">
</div>
<h3 class="title">Movie Title (PG)</h3>
<div class="schedule">
<p>Monday - 6PM</p>
<p>Tuesday - 6PM</p>
<p>Saturday - 3PM</p>
<p>Sunday - 3PM</p>
</div>
</a>
</div>
<div class="panel">
<a href="#movie-four">
<div class="left">
<img src="../../media/poster.jpg" height=355 width=240 class="poster">
</div>
<h3 class="title">Movie Title (PG)</h3>
<div class="schedule">
<p>Wednesday - 12PM</p>
<p>Thursday - 12PM</p>
<p>Friday - 12PM</p>
<p>Saturday - 9PM</p>
<p>Sunday - 9PM</p>
</div>
</a>
</div>
</div>
<br>
<!-- Synopsis Area -->
<div class="synopsis">
<div id="#movie-one">
<h3 class="movie-title">Movie Title (PG)</h3>
<div class="trailer">
<p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<iframe src="https://www.youtube.com"></iframe>
</div>
<div class="screening-buttons">
<a href="#">Monday - 12PM</a>
<a href="#">Tuesday - 12PM</a>
<a href="#">Wednesday - 6PM</a>
<a href="#">Thursday - 6PM</a>
<a href="#">Friday - 6PM</a>
<a href="#">Saturday - 12PM</a>
<a href="#">Sunday - 12PM</a>
</div>
<br>
</div>
</div>
<br>
<div class="synopsis">
<div id="#movie-two">
<h3 class="movie-title">Movie Title (PG)</h3>
<div class="trailer">
<p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<iframe src="https://www.youtube.com"></iframe>
</div>
<div class="screening-buttons">
<a href="#">Wednesday - 9PM</a>
<a href="#">Thursday - 9PM</a>
<a href="#">Friday - 9PM</a>
<a href="#">Saturday - 6PM</a>
<a href="#">Sunday - 6PM</a>
</div>
<br>
</div>
</div>
<br>
<div class="synopsis">
<div id="#movie-three">
<h3 class="movie-title">Movie Title (PG)</h3>
<div class="trailer">
<p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<iframe src="https://www.youtube.com"></iframe>
</div>
<div class="screening-buttons">
<a href="#">Monday - 6PM</a>
<a href="#">Tuesday - 6PM</a>
<a href="#">Saturday - 3PM</a>
<a href="#">Sunday - 3PM</a>
</div>
<br>
</div>
</div>
<br>
<div class="synopsis">
<div id="#movie-four">
<h3 class="movie-title">Movie Title (PG)</h3>
<div class="trailer">
<p class="movie-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<iframe src="https://www.youtube.com"></iframe>
</div>
<div class="screening-buttons">
<a href="#">Wednesday - 12PM</a>
<a href="#">Thursday - 12PM</a>
<a href="#">Friday - 12PM</a>
<a href="#">Saturday - 9PM</a>
<a href="#">Sunday - 9PM</a>
</div>
<br>
</div>
</div>编辑：我已经做了一些更多的研究和this is close 我正在寻找的东西。我试过用我的代码来做，但还是不行。
Script.js 文件：
$("#movie-one").click(function()
let synopsis = $(this).attr(".synopsis");
$("div").html(synopsis);
);【问题讨论】：
【参考方案1】：由于页面上已经存在静态内容，您可以为此使用 javascript。
我简化了您的示例并添加了一个脚本，该脚本将切换 CSS 类以隐藏和显示电影详细信息：
let selectedMovie = undefined;
// Create an eventlistener that will show the details of a movie.
let createMovieSelectionHandler = function(movieId)
return function()
// Hide previously selected movie.
if (selectedMovie)
document.getElementById(selectedMovie).classList.remove('selected');
// Show selected movie.
selectedMovie = movieId;
document.getElementById(selectedMovie).classList.add('selected');
;
;
// Find all movie elements on the page.
let movies = document.getElementsByClassName('movie');
// Add an eventlistener to each of them.
for (let i = 0; i < movies.length; ++i)
movies[i].addEventListener('click', createMovieSelectionHandler(movies[i].dataset.movieId));
/* Panels */
.movie
border: 1px solid #333;
border-radius: 15px;
width: 70%;
margin: 0 auto;
margin-bottom: 2rem;
.details
display: none;
.details.selected
display: block;
<div class="panel-group">
<div class="movie" data-movie-id="batman">
<h3>Batman</h3>
</div>
<div class="movie" data-movie-id="titanic">
<h3>Titanic</h3>
</div>
<div class="movie" data-movie-id="ghost">
<h3>Ghost Busters</h3>
</div>
</div>
<div id="batman" class="details">
<h3>Batman</h3>
<p>Lorem ipsum dolor sit amet, conse</p>
</div>
<div id="titanic" class="details">
<h3>Titanic</h3>
<p>Lorem ipsum dolor sit amet, conse</p>
</div>
<div id="ghost" class="details">
<h3>Ghost Busters</h3>
<p>Lorem ipsum dolor sit amet, conse</p>
</div>【讨论】：
以上是关于如何制作更新内容区？的主要内容，如果未能解决你的问题，请参考以下文章