Question

我创建了这个Icon-Bar作为我的网站导航。一切正常，现在我想添加一个功能，改变我的Icon-Bar右侧Div的内容，以便显示每个Icon的其他子菜单。我尝试了一些我在互联网上找到的功能，但没有对我有用。所以我的问题是：如何用我的Icon-Bar更改Div的内容。

ldloca.s

function setActiveTab() {
  $(".iconBarItem").click(function() {
    $(this).siblings().removeClass('activeIconBar');
    $(this).addClass('activeIconBar');
  });
};

.activeIconBar {
  background-color: red;
}

Answer 1

那么你可以使用.html函数编辑带有jQuery的.html，并根据点击的侧边栏项添加不同的内容。我的示例只是添加了相同内容+所点击项目的fa级。

＆＃13;

function setActiveTab() {
  $(".iconBarItem").click(function() {
    $(this).siblings().removeClass('activeIconBar');
    $(this).addClass('activeIconBar');
    var icon = $(this).find('i').attr("class");
    $('#sidebar-content').html( "<p>All new content. <em>You bet!</em></p>" + icon)
  });
};

＆＃13;

.activeIconBar {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-bar" style="float: left; height: 100%; background-color: #1C2336;">
  <div class="activeIconBar iconBarItem" style="border-left: 2px #51B4C7 solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-eye"></i> sada sd a</a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #79AE16 solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-user-o"></i>asasdasd<asdasd/a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #6DC763 solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-info-circle" aria-hidden="true"></i></a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #0574E7 solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-folder-open-o" aria-hidden="true"></i></a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #5285BA solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-calendar"></i></a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #80BCFB solid;"><a onclick="setActiveTab()" class="" href="#"><i></i></a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #FF8402 solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-line-chart"></i></a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #FFAE00 solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-desktop"></i></a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #FFDF61 solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-users"></i></a>
  </div>
  <div class="iconBarItem" style="border-left: 2px #B147E9 solid;"><a onclick="setActiveTab()" class="" href="#"><i class="fa fa-user-times"></i></a>
  </div>
</div>
<div id='sidebar-content'></div>

＆＃13;

如何使用图标栏更改Div的内容？

1 个答案: