How to target the href to div


Tags: html,css

Problem :

Here i am trying to open and get the contents of one div to target div on-click on a href. Here i have table where i have hrefs which has the link to div ids, and i have an target div which is empty.

when i click the href links, the linked div contents should open in the target div.

for ex: for link fea1 i have linked id #m1, when i click the fea1, the #m1 contents should appear in target div.

How can i do this???

here is my 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;
}


Solution :

You can put all your #m1...#m9 divs into .target and display them based on fragment identifier (hash) using :target pseudo-class. It doesn't move the contents between divs, but I think the effect is close to what you wanted to achieve.

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

    CSS Howto..

    How can I compile LESS files that @import other LESS files?

    How to target separated class names through css?

    CSS: how to align text content horizontally-centered and vertically-centered?

    How to make device width-height based html & css via PhoneGap

    How put some horizontal offset to an element bottom border with CSS?

    How to get the image height of an image to set another div height

    Creating an animated image slider - how to animate and restrict multiple clicks?

    How to set CSS for the php script loaded by Jquery

    How to change format of long text in cell?

    How to get this functionality to work

    How to represent dual-cell format in CSS?

    How to use @page CSS in ASP.NET MVC View

    CSS - How to deactivate the :hover pseudo class in IE 6

    What is a CSS Parse error and how do I fix it?

    How to perform --include-css when using the Jekyll stylus plugin

    How to expand my CSS3 menu and reduce its width

    Jquery show/hide more data

    How to change a defined value to a unspecified value by css?

    How to link css files to work correctly with wamp server?

    How would i change the colour dynamically depending on the width

    Polymer 1.0 how can I style a paper-input:disabled?

    how to apply css on only one class?

    How to give a line break between buttons in css/html?

    CSS: How do I make text indent for a label with long text?

    How to specify size of thumbnails for photos that are hosted externally?

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?

    how to number questions using class in CSS

    How to use Knockout.js to change a CSS class on mouseover?

    How would I make these two elements on the same line?

    How to display a custom css animation with jquery and fall back to just show() if not supported?