html - 如何在导航菜单中添加图片？

Question

我想像下面的代码那样做菜单。我想在菜单中添加图片但不同的图片。当我添加图片时，我通过菜单 1 到菜单 2 图片不会更改为其他图片。第一张图片一直留在 table 上。我该如何解决这个问题。

意思是，当我将图片添加到菜单 1(第一张图片)时，我在菜单 2 中看到了第一张图片。但是我只想在 MENU1 中看到图片 1

<div class="tabbable"> 
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">MENU1    </a></li>
    <li><a href="#tab2" data-toggle="tab">MENU2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane  " id="tab1">
      <p>MENU1 ITEMS 
      </p>
     <--! I want to add picture1 HERE---!>
      <div class="img"><img src="picture1.jpg" alt="" style="width:100px;height:100px;></div>

    </div>
    <div class="tab-pane " id="tab2">
      <p>Howdy, I'm in Section 2.</p>
     <--! I want to add picture2 HERE---!>
    </div>
  </div>

Answer 1

将引导脚本添加为:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

同时将active类添加到tab-pane active

见代码:

    img{
    height:200px;
    width:200px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

 <div class="tabbable"> 
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">MENU1    </a></li>
        <li><a href="#tab2" data-toggle="tab">MENU2</a></li>
      </ul>

  <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>MENU1 ITEMS 
          </p>
           <img src="/image/3mG2d.jpg"/>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
           <img src="/image/mSXoO.png"/>
        </div>
      </div>
        </div>