Wie man das href zum div zielt

Question

Jan 24, 2014, 09:42 AM

Wie man das href zum div zielt

Hier versuche ich, den Inhalt eines Div zu öffnen und zu erhalten, um Div auf einen Klick auf ein HREF zu zielen. Hier habe ich eine Tabelle, in der ich hrefs habe, die den Link zu div-IDs hat, und ich habe ein Ziel div, das leer ist.

Wenn ich auf die HREF-Links klicke, sollten sich die verknüpften Div-Inhalte im Ziel-Div öffnen.

zB für Linkfea1 Ich habe die ID verlinkt#m1, wenn ich auf die Schaltfläche klickefea1, das#m1 Der Inhalt sollte in target div angezeigt werden.

Wie kann ich das machen???

Hier ist mein Code:

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;
}