html – 如何将href定位到div

在这里,我正在尝试打开并获取一个div的内容来定位div,点击href.
在这里我有一个表,我有hrefs有链接到div ids,我有一个目标div是空的.

当我点击href链接时,链接的div内容应该在目标div中打开.

例如：
对于链接fea1我已经链接ID#m1,当我点击fea1,#m1内容应该出现在目标div.

我该怎么办？

这是我的代码：

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>
      Example
      </title>
      <link rel="stylesheet" type="text/css" href="css/style.css" />
      </head>
      <body>

        <table border="0">
          <tr>
            <td>
              <hr>
              <a href="#m1">
                fea1
              </a>
              <br>
              <hr>
              <a href="#m2">
                fea2
              </a>
              <br>
              <hr>
              <a href="#m3">
                fea3
              </a>
              <br>
              <hr>
              <a href="#m4">
                fea4
              </a>
              <br>
              <hr>
              <a href="#m5">
                fea5
              </a>
              <br>
              <hr>
              <a href="#m6">
                fea6
              </a>
              <br>
              <hr>
              <a href="#m7">
                fea7
              </a>
              <br>
              <hr>
              <a href="#m8">
                fea8
              </a>
              <br>
              <hr>
              <a href="#m9">
                fea9
              </a>
              <hr>
            </td>
          </tr>
        </table>


        <div class="target">

        </div>


        <div id="m1">
          dasdasdasd
        </div>
        <div id="m2">
          dadasdasdasd
        </div>
        <div id="m3">
          sdasdasds
        </div>
        <div id="m4">
          dasdasdsad
        </div>
        <div id="m5">
          dasdasd
        </div>
        <div id="m6">
          asdasdad
        </div>
        <div id="m7">
          asdasda
        </div>
        <div id="m8">
          dasdasd
        </div>
        <div id="m9">
          dasdasdsgaswa
        </div>        
      </body>
</html>

CSS：

a{
    text-decoration:none;
    color:black;
}

.target{
    width:50%;
    height:200px;
    border:solid black 1px; 
}

#m1,#m2,#m3,#m4,#m5,#m6,#m7,#m8,#m9{
    display:none;
}

解决方法

您可以将所有#m1 …#m9 divs放入.target,并使用 :target伪类基于片段标识符(散列)显示它们.它不会在div之间移动内容,但我认为效果接近于您想要实现的效果.

Fiddle

HTML

<div class="target">
    <div id="m1">
        dasdasdasd m1
    </div>
    <!-- etc... -->
    <div id="m9">
        dasdasdsgaswa m9
    </div>   
</div>

CSS

.target {
    width:50%;
    height:200px;
    border:solid black 1px; 
}
.target > div {
    display:none;
}

.target > div:target{
    display:block;
}

html – 如何将href定位到div

解决方法

猜你在找的HTML相关文章