时间戳

首页 > 解决方案 > 在html中打开仪表板主页时如何显示空视图？

javascript - 在html中打开仪表板主页时如何显示空视图？

问题描述

首次运行时，主页仪表板会在侧面菜单中显示项目详细信息和选定的项目名称。这是当前显示的屏幕截图在此处输入图像描述

究竟，我需要的是在此处输入图像描述

这是我使用的代码：

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-2 d-none d-md-block bg-light sidebar">
      <div id="projectlist" class="sidebar-sticky">
        <ul class="nav flex-column nav-pills">


          <li class="nav-item">
            <a name="EventDrivenLLC" class="nav-link active" href="#">

              <img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
              EventDrivenLLC

              <div>
                <small>
                ProjectId:
              </small>
              </div>
            </a>
            </li>

          <li class="nav-item">
            <a name="NickaJack" class="nav-link" href="#">

              <img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
              NickaJack

              <div>
                <small>
                ProjectId:
              </small>
              </div>
            </a>
            </li>

          <li class="nav-item">
            <a name="NickaJack" class="nav-link" href="#">

              <img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
              NickaJack

              <div>
                <small>
                ProjectId:
              </small>
              </div>
            </a>
            </li>

          <li class="nav-item">
            <a name="alarmist" class="nav-link" href="#">

              <img class="img-fluid" style="width:8%" src="./Cloud Thrifty_files/generic_gcp.png">
              alarmist

              <div>
                <small>
                ProjectId: alarmist-172522
              </small>
              </div>
            </a>
            </li>

选择项目时显示的详细信息 - 列出的项目从侧面菜单中列出，如果选择了任何侧面菜单项目，则它显示项目的详细信息并突出显示项目。

      <div id="decodingideas-147616" class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">
        <h1 class="h2">Project:decodingideas</h1>



    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">Compute API Enabled</button>
      </div>
      <div class="btn-group mr-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-secondary">Service Account Key</button>
      </div>
      <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">Other Errors</button>
      </div>
    </div>

<div class="container">
<h4>Compute Instances (0)</h4>
<table class="table table-striped h6">
<thead>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Type</th>
    <th scope="col">GCP Zone</th>
    <th scope="col">Startup</th>
    <th scope="col">Shutdown</th>
  </tr>

标签： javascripthtmlcsstwitter-bootstrapcontainers

解决方案

更仔细地查看您的代码。看看你在哪里：

<a name="EventDrivenLLC" class="nav-link active" href="#">

并将其更改为：

<a name="EventDrivenLLC" class="nav-link" href="#">

我不确定这是否会完全解决它，因为我没有看到您对该页面的完整编码，但请先尝试。

推荐阅读