带有内容的水平滚动菜单

Question

我想问

如何创建带有内容的水平滚动菜单？

我在https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp得到教程

但是在教程中没有内容（我的意思是如果我点击菜单新闻显示 teks 新闻或其他 teks，如果我点击菜单联系人，teks 新闻隐藏并显示 teks 联系人或其他 teks）

这是 css 的代码：

<style>
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}
</style>

这用于 html 代码：

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>  
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

如果单击其中一个菜单，如何创建带有内容的水平滚动菜单？

如果菜单新闻我单击显示 teks 新闻或其他 teks 如果我单击菜单联系人，则 teks 新闻隐藏并显示 teks 联系人或其他 teks

谢谢

=====================

已解决：我发现了这个：Show/Hide Multiple Divs Javascript

Answer 1

你在寻找这样的东西吗？

运行下面截取的代码并将鼠标悬停在新闻或联系人上：

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu li {
  display: inline-block;
}

div.scrollmenu li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

ul>li>ul {
  display: none;
}

ul>li:hover>ul {
  background-color: #333;
  position: absolute;
  display: block;
}

<div class="scrollmenu">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a>
      <ul>
        <li><a href="#">News 1</a></li>
        <li><a href="#">News 2</a></li>
        <li><a href="#">News 3</a></li>
      </ul>
    </li>
    <li><a href="#contact">Contact</a>
      <ul>
        <li><a href="#">Contact 1</a></li>
        <li><a href="#">Contact 2</a></li>
        <li><a href="#">Contact 3</a></li>
      </ul>
    </li>
    <li><a href="#about">About</a></li>
    <li><a href="#support">Support</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#tools">Tools</a></li>
    <li><a href="#base">Base</a></li>
    <li><a href="#custom">Custom</a></li>
    <li><a href="#more">More</a></li>
    <li><a href="#logo">Logo</a></li>
    <li><a href="#friends">Friends</a></li>
    <li><a href="#partners">Partners</a></li>
    <li><a href="#people">People</a></li>
    <li><a href="#work">Work</a></li>
  </ul>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

希望对你有帮助