Question

我想做菜单，例如下面的代码。我想在菜单中添加图片但图片不同。当我添加图片时，从菜单1到MENU 2的图片不会更改为其他。第一张照片一直在餐桌上。我该怎么解决。

意思是，当我在菜单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

查看代码：

    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="https://i.stack.imgur.com/3mG2d.jpg"/>
        </div>
        <div class="tab-pane" id="tab2">
          <p>Howdy, I'm in Section 2.</p>
           <img src="https://i.stack.imgur.com/mSXoO.png"/>
        </div>
      </div>
        </div>

Answer 2

请从official bootstrap documentation中找到复制/粘贴示例

您需要做的就是在下面的适当div中添加图片。

并根据需要修改html / css

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Answer 3

您可以使用img标签或在CSS中进行操作

HTML：

<img src="Your_img_adress" alt="">

或使用html和CSS： HTML：

<div class="img"></div>

Css：

.img {
   background-url: (your-url);
   height: 100px; /* You can change this if you want */
   width: auto; /* You can change this if you want */
}

Answer 4

更好的方法是使用<img>标记并将其用作

<img src"image link" alt=''>

如果需要更大的灵活性，还可以使用引导程序映像类或向image文件中的.css类添加/更改属性。

Answer 5

您可以将此添加到您的HTMl

<img src="example.png" alt="">

或者像Karan所说的那样制作一个图像div，然后向其中添加CSS

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

5 个答案: