Question

我希望网页的一侧具有无序的链接列表，当您单击这些链接时，信息将基于单击的链接显示在网页的另一侧。如果不能用PHP做到这一点，可以仅使用HTML和CSS吗？

这是我当前的代码

article {
  float: left;
  padding: 0px;
  width: 35%;
  background-color: #f1f1f1;
  height: 650px;
}

li {
  margin: 40px 0;
}

<article>
  <ul style="list-style-type:none">
    <li><a href="#Tiger">Tiger</a></li>
    <li><a href="#Hammerhead">Hammerhead</a></li>
    <li><a href="#Bull">Bull</a></li>
    <li><a href="#Great White">Great White</a></li>
    <li><a href="#Mako">Mako</a></li>
    <li><a href="#Greenland">Greenland</a></li>
    <li><a href="#Whale">Whale</a></li>
    <li><a href="#Thresher">Thresher</a></li>
    <li><a href="#Oceanic">Oceanic WhiteTip</a></li>
    <li><a href="#Goblin">Goblin</a></li>
  </ul>
</article>

Answer 1

这可以通过使用JavaScript来实现，方法是在链接的另一侧创建一个元素，然后使用

document.getElementById("id").innerHTML

根据点击的内容（通过将onclick函数链接到您的链接）来编辑其内容。

仅通过CSS和HTML不能完成显示后的网页编辑。

这里是CODEPEN

Answer 2

仅适用于HTML和CSS （如果您确实坚持的话，但是有点讨厌，很）：将包含相关信息的<div>放置在<li>元素内。当鼠标悬停在链接上时（并获得:hover的CSS值），<div>和<li>也是如此。将<div>隐藏（使用CSS）并仅在悬停时显示。

li div {display:none;}
li:hover div {display:block; ... }

这是我为您制作的Codepen演示。

客户端javascript / jQuery 。 ..是一种更为实用的选择，其中单击链接将更改各个<div>的CSS，可以根据需要放置和设置样式。或者，使用包含文本的data-属性，可以将此文本插入右侧的单个信息<div>中。

如何拆分网页并在一侧具有可点击链接，而这些链接将在另一侧显示

2 个答案: