如何从图像链接到特定的 div答案

【问题标题】：how to link to a specific div from an image如何从图像链接到特定的 div
【发布时间】：2017-06-13 09:27:11
【问题描述】：

我目前正在做一个学校项目。 please click HERE to see my page

我有 3 个我喜欢可点击的瓶子图片，这样如果我点击一个瓶子，它会将我重定向到一个 div。

这是我的 html 的样子：

.zero {
  height: 20%;
  background-color: #f8f5f2;
  color: 000b29;
  text-align: center;
  font-size: 80px;
}

.secOne {
  background-image: url("../img/hero/premium.jpg");
}

.sub_sectionOne {
  height: 20%;
  background-color: #000B29;
  color: #d70026;
  text-align: center;
  font-size: 80px;
}

.secTwo {
  background-image: url("../img/hero/black.jpg");
}

.sub_sectionTwo {
  height: 20%;
  background-color: #D70026;
  color: #f8f5f2;
  text-align: center;
  font-size: 80px;
}

.secThree {
  background-image: url("../img/hero/goldhero.jpg");
}

.sub_sectionThree {
  height: 20%;
  background-color: #edb83d;
  color: #d70026;
  text-align: center;
  font-size: 80px;
}

<div class="section">
  <video id="bgvid" autoplay loop poster="img/Snapshot/Beach-Ball.jpg" alt="people playing soccer at the beach">
       <source src="img/Mp4/Beach-Ball.mp4" type="video/mp4" />
       <source src="img/Ogv/Beach-Ball.ogv" type="video/ogv" />
       <source src="img/Webm/Beach-Ball.webm" type="video/webm" />
   </video>
  <!-- bottle navigation -->
  <div class="bottle">
    <h1>Beast Mode On</h1>
    <div class="bottle-nav">
      <img src="img/bottles/125_bluelightningbottle.png" alt="Oztonic Premium Energy Drink Bottle">
      <img src="img/bottles/125_redlightningbottle.png" alt="OzTonic Black Energy Drink Bottle">
      <img src="img/bottles/125_yellowlightningbottle.png" alt="OzTonic Gold Energy Drink Bottle">
    </div>
  </div>
  <!-- sections -->
  <div class="zero">
    <h2>Which Beast Are You?</h2>
  </div>
  <div class="section secOne"></div>
  <div class="sub_sectionOne">
    <h2>I'm a Premium Beast</h2>
  </div>
  <div class="section secTwo"></div>
  <div class="sub_sectionTwo">
    <h2>I'm a Black Beast</h2>
  </div>
  <div class="section secThree"></div>
  <div class="sub_sectionThree">
    <h2>I'm a Gold Beast</h2>
  </div>

所以我喜欢让我的 125_bluelightningbottle.png 将我重定向到 div class="section secOne.my 125_redlightningbottle.png 将我重定向到 div class="section secTwo. 和我的 125_yellowlightningbottle.png 将我重定向到 div class="section secThree.

那些带有类的 div 由这些样式设置（请参阅下面的 css 代码），如您所见，我的图像设置为 background-img: url("..img/hero/black.jpg'); 和等等……

但是，这是我尝试过的，但我在执行此操作时遇到了问题：如果我使用并用它包裹bottle.png并放并包装我的 div class="section secOne" 我所有的背景图像都消失了。

提前感谢您的帮助

【问题讨论】：

只需为要重定向的每个 div 添加一个 ID，然后在图片链接中将其设置为：href="#divID"

标签： html css anchor

【解决方案1】：

如果您想在单击图像时重定向到 div，您可以将每个图像包装在一个带有锚点的标签中，并在目标元素上添加一个 id。

    <a href="#secOne">
        <img src="img/bottles/125_bluelightningbottle.png" alt="Oztonic Premium Energy Drink Bottle">
    </a>
    <div class="section secOne" id="secOne">Your Div</span>

然后，如果您单击 seOne 锚点，您将转到 #seOne 元素。

Here's an explanation

【讨论】：

【解决方案2】：

<div class="section">
<video id="bgvid" autoplay loop poster="img/Snapshot/Beach-Ball.jpg" alt="people playing soccer at the beach">
    <source src="img/Mp4/Beach-Ball.mp4" type="video/mp4" />
    <source src="img/Ogv/Beach-Ball.ogv" type="video/ogv" />
    <source src="img/Webm/Beach-Ball.webm" type="video/webm" />
</video>
<!-- bottle navigation -->        
<div class="bottle">
    <h1>Beast Mode On</h1>
    <div class="bottle-nav">
        <a href="#secOne"><img src="img/bottles/125_bluelightningbottle.png" alt="Oztonic Premium Energy Drink Bottle"></a>
        <a href="#secTwo"><img src="img/bottles/125_redlightningbottle.png" alt="OzTonic Black Energy Drink Bottle"></a>
        <a href="#secThree"><img src="img/bottles/125_yellowlightningbottle.png" alt="OzTonic Gold Energy Drink Bottle"></a>
    </div>    
</div>
<!-- sections -->
<div class="zero">
    <h2>Which Beast Are You?</h2>    
</div>   
<div class="section secOne" id="secOne"></div>
<div class="sub_sectionOne">
    <h2>I'm a Premium Beast</h2>
</div>  
<div class="section secTwo" id="secTwo"></div>
<div class="sub_sectionTwo">
    <h2>I'm a Black Beast</h2>
</div>
<div class="section secThree" id="secThree"></div>
<div class="sub_sectionThree">
    <h2>I'm a Gold Beast</h2>
</div>

用上面的html代码替换你的html代码。

【讨论】：