Как настроить таргетинг на href на div

Здесь я пытаюсь открыть и получить содержимое одного div для таргетинга div на клик на href. Здесь у меня есть таблица, где у меня есть hrefs, у которого есть ссылка на div id, и у меня есть целевой div, который пуст.

когда я нажимаю ссылки href, связанное содержимое div должно открываться в целевом div.

для ex: для ссылки 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;
}

Ответы

Ответ 1

Вы можете поместить все ваши #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;
}

Ответ 2

Из того, что я знаю, это будет невозможно только с помощью css. Вот решение, как вы могли бы заставить его работать с jQuery, который является библиотекой javascript. Подробнее о jquery здесь: http://jquery.com/

Вот рабочий пример: http://jsfiddle.net/uyDbL/

$(document).ready(function(){
    $('a').on('click',function(){
        var aID = $(this).attr('href');
        var elem = $(''+aID).html();

        $('.target').html(elem);
    });
});

Ответ 3

Поместите для div то же имя, что и в href target.

ex: <div name="link"> и <a href="#link">

Ответ 4

Попробуйте этот код в jquery

$(document).ready(function(){
  $("a").click(function(){
  var id=$(this).attr('href');
  var value=$(id).text();
  $(".target").text(value);
  });
});

Ответ 5

havent попытался, но это могло бы помочь

$(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;
});

});

});

});

Ответ 6

если вы используете

angularjs

вам нужно просто написать правильный css, чтобы сфотографировать div html-код 

<div 
style="height:51px;width:111px;margin-left:203px;" 
ng-click="nextDetail()">
</div>


  Код JS (в вашем контроллере):

$scope.nextDetail = function()
{
....
}

Ответ 7

простой способ сделать это как

<a href="demo.html#divid">Demo</a>