如何從html的側欄菜單中選擇項目詳細信息？

Question

在這里，我從json獲取項目列表。 JSON結果將在側欄中列出的地方有一個菜單。

這是我得到的JSON結果

"projects": [
  {
    "instances": null,
    "name": "decodingideas",
    "projectid": "decodingideas-147616",
    "projectnumber": 334691107943,
    "orgid": "",
    "orgname": "",
    "parentid": "",
    "parenttype": ""
},
{
    "instances": null,
    "name": "pupil-workers",
    "projectid": "pupil-workers",
    "projectnumber": 455648594684,
    "orgid": "",
    "orgname": "",
    "parentid": "",
    "parenttype": ""
}

在側欄菜單中將列出“名稱”和“項目ID”。 當單擊任何項​​目名稱時，它應該顯示詳細的項目，例如項目名稱，項目ID，項目編號，實例..etc等，這些都是我從JSON結果中獲取的

這是我用於列出json項目的代碼：

<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">

          {{range .Projects}}
          <li class="nav-item" >
            <a name="{{.ProjectID}}" class="nav-link" href="#">

              <img class="img-fluid" style="width:8%" 
  src="static/image/generic_gcp.png">
              {{.Name}}

              <div>
                <small>
                ProjectId: {{.ProjectID}}
              </small>
              </div>
            </a>
            </li>
            {{end}}

        </ul>

 <!-- Might need this seperator
        <h6 class="sidebar-heading d-flex justify-content-between align-items- 
 center px-3 mt-4 mb-1 text-muted">
          <span>Savings Reports</span>
        </h6>
      -->
      </div>
    </nav>
       <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      {{range .Projects}}

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

<!-- This pushes right
<div class="btn-toolbar mb-2 mb-md-0">    </div>
 -->

    <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>

這是我嘗試過的javascript代碼：

  <script>
$(function() {
  $( 'ul.nav a' ).on( 'click', function() {
        var pjname = $( this ).attr('name');
        $( this ).parent().parent().find( 'a.active' ).removeClass( 'active' 
);
        $( this ).addClass( 'active' );
        $('#'+pjname).toggleClass( 'd-none');
      });
});
</script>

   <script>

var btnContainer = document.getElementById("projectlist")
var btns = btnContainer.getElementsByClassName("btn");


for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

現在，我正在獲取選定的項目詳細信息，但是當從側欄中單擊下一個項目時，它將另外顯示先前單擊的項目詳細信息。 如何僅顯示所選項目的詳細信息？

誰能幫我這個忙，過去的一天我幾乎在掙扎中！！！

Answer 1

將通用類添加到項目說明div。 例如-“正確的內容”

更改

從

<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
 flex-md-nowrap align-items-center pb-2 mb-3 border-bottom ">

至

<div id={{.ProjectID}} class="d-none justify-content-between flex-wrap 
 flex-md-nowrap align-items-center pb-2 mb-3 border-bottom right-content">

下面的方式沒有改變js

從

<script>
$(function() {
  $( 'ul.nav a' ).on( 'click', function() {
        var pjname = $( this ).attr('name');
        $( this ).parent().parent().find( 'a.active' ).removeClass( 'active' 
);
        $( this ).addClass( 'active' );
        $('#'+pjname).toggleClass( 'd-none');
      });
});
</script>

至

<script>
$(function() {
    $('ul.nav a').on('click', function() {
        var pjname = $(this).attr('name');
        $(this).parent().parent().find('a.active').removeClass('active');
        $(this).addClass('active');
        $('.right-content').removeClass('d-none');
        $(".right-content:not(#" + pjname + ")").addClass('d-none');
    });
});
</script>