垂直药丸,内容在右侧 - HTML

简介

垂直药丸是一种在网页设计中经常使用的设计元素。它是一个含有内容的小框，通常用于显示其他相关信息或链接。这些框水平排列，从左侧到右侧。

而在垂直药丸中，这些框被排列在页面的右侧。当用户悬停在药丸上时，药丸会展开，显示垂直排列的内容。垂直药丸在网站导航、侧边栏以及个人资料页面中非常常见。

在 HTML 中，垂直药丸可以使用 CSS 和 JavaScript 实现。CSS 负责定义垂直药丸的样式，而 JavaScript 控制药丸的展开和收起。

实现

下面是一个简单的垂直药丸的 HTML 和 CSS 代码块，用于实现一个简单的导航栏。

<div class="vertical-tabs">
  <button class="tablink" onclick="openTab('Home')">Home</button>
  <button class="tablink" onclick="openTab('News')">News</button>
  <button class="tablink" onclick="openTab('Contact')">Contact</button>

  <div id="Home" class="tabcontent">
    <h3>Home</h3>
    <p>Welcome to our website</p>
  </div>

  <div id="News" class="tabcontent">
    <h3>News</h3>
    <p>Stay up to date with our latest news</p>
  </div>

  <div id="Contact" class="tabcontent">
    <h3>Contact</h3>
    <p>Get in touch with us</p>
  </div>
</div>

<style>
  .vertical-tabs {
    display: flex; /* 水平排列 */
  }

  .tablink {
    background-color: #f2f2f2; /* 按钮背景颜色 */
    border: none; /* 去掉边框 */
    outline: none; /* 去掉焦点框 */
    cursor: pointer; /* 鼠标光标 */
    padding: 10px 15px; /* 按钮间距 */
    margin-right: 10px; /* 按钮右侧间距 */
    transition: 0.3s; /* 过渡效果 */
  }

  .tablink:hover {
    background-color: #ddd; /* 鼠标悬停时的背景颜色 */
  }

  .tabcontent {
    display: none; /* 隐藏内容框 */
    padding: 20px; /* 内容框的内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-top: none; /* 去掉顶部边框 */
    width: 100%; /* 内容框宽度 */
  }

  /* 当特定的药丸按钮被点击时，显示对应的内容框 */
  #Home.active,
  #News.active,
  #Contact.active {
    display: block;
  }
</style>

<script>
  function openTab(tabName) {
    var i, tabcontent, tablinks;
    // 隐藏所有内容框
    tabcontent = document.getElementsByClassName('tabcontent');
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = 'none';
    }
    // 把所有药丸按钮的 active 样式去掉
    tablinks = document.getElementsByClassName('tablink');
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].classList.remove('active');
    }
    // 显示当前药丸按钮的对应内容框，并添加 active 样式
    document.getElementById(tabName).style.display = 'block';
    event.currentTarget.classList.add('active');
  }
</script>

这段代码定义了一个 vertical-tabs 容器，并在其中包含了三个药丸按钮和三个内容框。CSS 样式定义了药丸按钮和内容框的样式，而 JavaScript 函数 openTab() 控制药丸的展开。

总结

垂直药丸是一个效果很好的网页设计元素，特别是对于那些需要展示多个相关信息或链接的页面。我们可以使用 HTML、CSS 和 JavaScript 来实现这个效果，只需要了解相关的样式和 JavaScript 函数即可。