如何制作更新内容区？答案

【问题标题】：How to make an updating content area?如何制作更新内容区？
【发布时间】：2023-04-11 06:30:01
【问题描述】：

我想做的事

我正在制作一个电影演示网站，我有四个电影海报面板，显示海报、标题和放映时间，这些应该是可点击的。

当有人点击任何一个面板时，我的意图是在面板下方填充文本和预告片视频的区域根据点击的面板更新/替换其内容。其他三个区域应该是隐藏的。

我已经制作了面板和容器区域，但我还没有弄清楚如何让内容被替换。

我尝试过的/编码

我发现了类似的问题，例如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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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 width="560" height="315" 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);
});

【问题讨论】：

标签： javascript html css

【解决方案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>

【讨论】：