Question

我正在尝试在左侧创建一个菜单，在不使用JavaScript的情况下显示右侧的内容。

.treeview ul{ /*CSS for Simple Tree Menu*/
margin: 0;
padding: 0;
}

.treeview li{ /*Style for LI elements in general (excludes an LI that contains sub lists)*/
background: white no-repeat left center;
list-style-type: none;
padding-left: 22px;
margin-bottom: 3px;
}

.treeview li.submenu{ /* Style for LI that contains sub lists (other ULs). */
background: white url(list.gif) no-repeat left 1px;
cursor: hand !important;
cursor: pointer !important;
}


.treeview li.submenu ul{ /*Style for ULs that are children of LIs (submenu) */
display: none; /*Hide them by default. Don't delete. */
}

.treeview .submenu ul li{ /*Style for LIs of ULs that are children of LIs (submenu) */
cursor: default;
}

div.container {
    width: 100%;
    border: 3px solid gray;
}

header, footer {
    padding: 1em;
    color: white;
    background-color: black;
    clear: left;
    text-align: center;
}

nav {
    float: left;
    max-width: 250px;
    margin: 0;
    padding: 2em;
}

nav ul {
    list-style-type: none;
    padding: 0;
}
   
nav ul a {
    text-decoration: none;
}

article {
	position:relative;
    margin-left: 160px;
    border-left: 1px solid gray;
    padding: 10em;
    overflow: hidden;
}

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="simpletree.css" />


</head>
<body>

<div class="container">

<header>
   <h1>Documentation</h1>
</header>
  
<nav>
<h4>Main Menu:</h4>


<ul id="treemenu" class="treeview">
<div class="collapse" tabindex="1">
<a href=""><li>Menu 1</li></a>
</div>
<li>Menu 2</li>

<li>Menu 3
	<ul>
	<li>Sub Item 3.1</li>
	<li>Sub Item 3.2</li>
	</ul>
</li>
<li>Menu 4</li>
<li>Menu 5
	<ul>
	<li>Sub Item 5.1</li>
	<li>Menu 5.1
		<ul>
		<li>Sub Item 5.1.1</li>
		<li>Sub Item 5.1.2</li>
		</ul>
	</li>
</ul>
</li>

<li>Menu 6</li>
</ul>

</nav>

<article>
  <h1>Menu 1</h1>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </article>



<footer></footer>

</div>

</body>
</html>

我无法在点击Menu1时右侧显示内容，然后仅使用纯HTML / CSS删除内容并显示另一个内容点击Menu2

Answer 1

一种可能的选择是使用Select top 1 * from table Where value >= 1500 order by value伪类来显示:target。

引自MDN：

：target 伪类表示唯一元素（如果有）一个id匹配文档URI的片段标识符。

以下是演示相同内容的示例摘录：

article

/** Menu content styles **/

article {
  position: relative;
  margin-left: 160px;
  border-left: 1px solid gray;
  padding: 10em;
  overflow: hidden;
}
.menuContent {
  display: none;
}
#menu1Content:target {
  display: block;
}
#menu2Content:target {
  display: block;
}
#menu3Content:target {
  display: block;
}
/** Menu styles **/

.treeview ul {
  /*CSS for Simple Tree Menu*/
  margin: 0;
  padding: 0;
}
.treeview li {
  /*Style for LI elements in general (excludes an LI that contains sub lists)*/
  background: white no-repeat left center;
  list-style-type: none;
  padding-left: 22px;
  margin-bottom: 3px;
}
div.container {
  width: 100%;
  border: 3px solid gray;
}
header,
footer {
  padding: 1em;
  color: white;
  background-color: black;
  clear: left;
  text-align: center;
}
nav {
  float: left;
  max-width: 250px;
  margin: 0;
  padding: 2em;
}
nav ul {
  list-style-type: none;
  padding: 0;
}
nav ul a {
  text-decoration: none;
}

Answer 2

如果您正在追求我认为您正在追求的目标，即 - 单击菜单中的一个项目，为了在右侧显示内容，这是完全可能的，但您必须进行一些更改。

首先，移动<a>内的<li> - 包裹<li>中的<a>元素是无效的HTML。

然后，您要在所述href的{{1}}中添加要显示的容器的链接 - 对于此回复，请说明您将<a>更改为href。然后你找到相应的文章，并给出href="article1"。

在您的CSS中，您提供了所有文章id="article1"（因此默认情况下它们已被隐藏），并为它们定位时设置CSS规则。您可以执行此操作，从而可以使用display: none;将:target - 事件附加到多个ID - 这将附加到以“文章”开头的每个ID。然后将其设置回[id^=article]:target，您将看到刚刚点击的文章。

左边的纯HTML / CSS垂直菜单点击右侧显示内容（不含JavaScript）

2 个答案: