How to target the href to div

Question

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    lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt        Example        lt  title gt         lt link rel  stylesheet  type  text css  href  css style css    gt         lt  head gt         lt body gt            lt table border  0  gt             lt tr gt               lt td gt                 lt hr gt                 lt a href   m1  gt                  fea1                lt  a gt                 lt br gt                 lt hr gt                 lt a href   m2  gt                  fea2                lt  a gt                 lt br gt                 lt hr gt                 lt a href   m3  gt                  fea3                lt  a gt                 lt br gt                 lt hr gt                 lt a href   m4  gt                  fea4                lt  a gt                 lt br gt                 lt hr gt                 lt a href   m5  gt                  fea5                lt  a gt                 lt br gt                 lt hr gt                 lt a href   m6  gt                  fea6                lt  a gt                 lt br gt                 lt hr gt                 lt a href   m7  gt                  fea7                lt  a gt                 lt br gt                 lt hr gt                 lt a href   m8  gt                  fea8                lt  a gt                 lt br gt                 lt hr gt                 lt a href   m9  gt                  fea9                lt  a gt                 lt hr gt               lt  td gt             lt  tr gt           lt  table gt             lt div class  target  gt            lt  div gt             lt div id  m1  gt            dasdasdasd          lt  div gt           lt div id  m2  gt            dadasdasdasd          lt  div gt           lt div id  m3  gt            sdasdasds          lt  div gt           lt div id  m4  gt            dasdasdsad          lt  div gt           lt div id  m5  gt            dasdasd          lt  div gt           lt div id  m6  gt            asdasdad          lt  div gt           lt div id  m7  gt            asdasda          lt  div gt           lt div id  m8  gt            dasdasd          lt  div gt           lt div id  m9  gt            dasdasdsgaswa          lt  div gt                 lt  body gt   lt  html gt    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

User · Accepted Answer

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   lt div class  target  gt       lt div id  m1  gt          dasdasdasd m1      lt  div gt       lt  -- etc    -- gt       lt div id  m9  gt          dasdasdsgaswa m9      lt  div gt      lt  div gt    CSS   target       width 50       height 200px      border solid black 1px      target  gt  div       display none      target  gt  div target      display block

User · Answer

Try this code in jquery    document  ready function         a   click function      var id   this  attr  href      var value   id  text          target   text value

User · Answer

easy way to do that is like    lt a href  demo html divid  gt Demo lt  a gt

User · Answer

Put for div same name as in href target   ex   lt div name  link  gt  and  lt a href   link  gt

User · Answer

if you use      angularjs   you have just to write the right css in order to frame you div html code   lt div  style  height 51px width 111px margin-left 203px    ng-click  nextDetail    gt   lt  div gt         JS Code in your controller     scope nextDetail   function

User · Answer

havent tried but this might help    document  ready function    r 0 s -1    a  click function    v   this  html      a  each function    if   this  html    v  return  else   r    div  each function    if s  r    div  appendTo     target        S

User · Answer

From what I know this will not be possible only with css  Heres a solution how you could make it work with jQuery which is a javascript Library  More about jquery here  http   jquery com   Here is a working example   http   jsfiddle net uyDbL     document  ready function           a   on  click  function            var aID     this  attr  href            var elem        aID  html                 target   html elem                 Update 2018  as this still gets upvoted  here is a plain javascript solution without jQuery   x000D   x000D  var target   document querySelector   target    x000D      document querySelectorAll  table a    forEach function element   x000D      element addEventListener  click   function    x000D          target innerHTML   document querySelector element getAttribute  href    innerHTML  x000D          x000D      x000D  a  x000D      text-decoration none  x000D      color black  x000D    x000D   x000D   target  x000D      width 50   x000D      height 200px  x000D      border solid black 1px   x000D    x000D   x000D   m1   m2   m3   m4   m5   m6   m7   m8   m9  x000D      display none  x000D    x000D   lt table border  0  gt  x000D   lt tr gt  x000D   lt td gt  x000D   lt hr gt  x000D   lt a href   m1  gt fea1 lt  a gt  lt br gt  lt hr gt  x000D   lt a href   m2  gt fea2 lt  a gt  lt br gt  lt hr gt  x000D   lt a href   m3  gt fea3 lt  a gt  lt br gt  lt hr gt  x000D   lt a href   m4  gt fea4 lt  a gt  lt br gt  lt hr gt  x000D   lt a href   m5  gt fea5 lt  a gt  lt br gt  lt hr gt  x000D   lt a href   m6  gt fea6 lt  a gt  lt br gt  lt hr gt  x000D   lt a href   m7  gt fea7 lt  a gt  lt br gt  lt hr gt  x000D   lt a href   m8  gt fea8 lt  a gt  lt br gt  lt hr gt  x000D   lt a href   m9  gt fea9 lt  a gt  x000D   lt hr gt  x000D   lt  td gt  x000D   lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D   lt div class  target  gt  x000D   x000D   lt  div gt  x000D   x000D   x000D   lt div id  m1  gt dasdasdasd lt  div gt  x000D   lt div id  m2  gt dadasdasdasd lt  div gt  x000D   lt div id  m3  gt sdasdasds lt  div gt  x000D   lt div id  m4  gt dasdasdsad lt  div gt  x000D   lt div id  m5  gt dasdasd lt  div gt  x000D   lt div id  m6  gt asdasdad lt  div gt  x000D   lt div id  m7  gt asdasda lt  div gt  x000D   lt div id  m8  gt dasdasd lt  div gt  x000D   lt div id  m9  gt dasdasdsgaswa lt  div gt  x000D   x000D   x000D

[html] How to target the href to div

Examples related to html

Examples related to css