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

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

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

напра: для связи fea1 я соединял идентификатор #m1, когда я нажимаю fea1, то #m1 содержимых должны появиться в целевых делах.

Как я могу это сделать ???

вот мой код:

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

источник

2014-01-24 Mithun Raikar

Где мой javascript-код? –

@Pilot Я не использовал код JavaScript для этого –

OMG, тогда как вы это делаете? .. –

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

источник

2014-01-24 09:04:59 pawel

+1 спасибо за показ можно только с html и css! – caramba

+1 - Это чистое решение. – enhzflep

Следует упомянуть, что ': target' не поддерживается в IE8 и ниже. В противном случае, хорошая работа! –

Put для сНу таким же именем, как и в HREF цели.

например: <div name="link"> и <a href="#link">

источник

2014-01-24 08:51:24 impelo

* «положить для div, на который вы хотите нацелить». * Это не похоже на правильное предложение. Пожалуйста, отредактируйте свой ответ и уточните его. –

Ах. Это на самом деле не нужно, потому что атрибут 'id' имеет тот же эффект, что и атрибут' name' в этом случае. –

Из того, что я знаю, что это не будет возможно только с помощью 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); 
    }); 
});

источник

2014-01-24 08:51:49 caramba

jQuery не помечен для этого вопроса. –

@RahulDesai Вы правы! но в вопросе он пишет: «Как я могу это сделать?» это ответ, показывающий, как он мог это сделать ... – caramba

Неплохо бы, по крайней мере, указать OP, что у вас есть решение, основанное на jQuery и т. д. –

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

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

источник

2014-01-24 09:03:33 abinaya

Что такое '' '' '' '? Это не стандартная функция JavaScript. –

Используется jquery для получения результата – abinaya

Ah. Если вопрос не помечен jQuery, вы не должны предоставлять ответ jQuery. Или, по крайней мере, вы также должны предоставить решение, отличное от jQuery. –

попытался нету, но это может помочь

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

}); 

});

});

источник

2014-01-24 09:04:49 curositykiller

Что такое '' '' '' '? Это не стандартная функция JavaScript. Также ваш код действительно трудно прочитать. По крайней мере, вы могли бы отступить. –

используется для выбора в jquery – curositykiller

Тогда вы должны хотя бы * упомянуть *, что вы используете jQuery. Но если вопрос не помечен jQuery, вы не должны предоставлять ответ jQuery. –

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

angularjs

вы должны просто написать правильный CSS для того, чтобы кадр, Div HTML код

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

JS код (в контроллере):

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

источник

2015-12-16 09:19:20

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

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

источник

2017-09-28 10:23:02

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

ответ

Смежные вопросы