Question

有人可以帮助我解决这个问题吗

检查站点-> Link

左div上的链接必须在右灰色div上打开

但是当我单击链接没有任何反应时，只有第一个链接“ etusivu”会在页脚中打开文件“ etu.html”：/

下面的我的css和html代码：

body, html{
    padding:0;
    margin:0;
    position:relative;
    height:100%
}

.header {
    width:100%;
    height: 128px;
    background: #F32C2D;
    padding:10px;
    box-sizing:border-box;
}

.footer{
    width:100%;
    height: 100px;
    background:#ccc;
    padding:10px;
    box-sizing:border-box;
}

.content {
    background:#eee;
    width:100%;
    padding:10px;
    height:100%;
    box-sizing:border-box;
    padding:10px;
}

.left{
    width:200px;
    float:left;
    background: #CE1212;
    height:100%;
}

.right{
    width: auto;
    background:#aaa;
    height:100%;
}

.logoimg {
  position:absolute;
  left:0;
  top:0;
  margin-left: 2%;
}

.titletext {
  text-align: center;
  vertical-align: middle;
  color: white;
}

.vertical-menu {
  width: 200px; /* Set a width if you like */
}

.vertical-menu a {
  background-color: #eee; /* Grey background color */
  color: black; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
  background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
  background-color: #F32C2D; /* Add a green color to the "active/current" link */
  color: white;
}

<body>
  <div class="header">
    <img class="logoimg" src="logo.png" alt="Food-Line" height="125" width="125">
    <h1 class="titletext">Food-Line Tuki</h1>
    <h3 class="titletext">Autamme mielellämme</h3>
</div>

<div class="content">
    <div class="left">
      <div class="vertical-menu">
       <a href="etu.html" class="active" target="right">Etusivu</a>
       <a href="#">Käyttö- & toimitusehdot</a>
       <a href="maksaminen.html" target="right">Maksaminen</a>
       <a href="#">Mobiilisovellus</a>
       <a href="#">Tilaaminen</a>
       <a href="#">Ota Yhteyttä</a>
      </div>
    </div>
    <div class="right" id="right">
      <iframe name="right" src="" width="100%"
        height="100%" frameBorder="0"></iframe>
        <p>testi testi testi</p>
    </div>
</div>

<div class="footer">
    footer content
</div>
</body>

有人有什么想法吗？

再次，我希望当我单击左侧的某个链接时，该链接的目标html文件必须在右侧的灰色div上打开

Answer 1

您的iframe和div名称相同，可能会冲突，请尝试重命名iframe

如果您希望iframe自动加载etu.html，请尝试以下操作：

<iframe name="right" src="etu.html" width="100%">

还要使所有链接标记均定位为 iframe ，而不是您使用etu.html正确完成的正确div，只需修复其余部分

从左栏加载链接到右div

1 个答案: