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:

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

You have to think about Javascript. Do you want something to do with tab options? like the Jquery (javascript library) http://jqueryui.com/tabs/ — Nagaraj Tantri, Jan 24 '14 at 08:48
@LearningNeverStops yes it is some thing like that. When i click some link, the linked element should appear in target div. — CJAY, Jan 24 '14 at 08:51
@RahulDesai "Consider" is an understatement... AFAIK it is impossible without Javascript — Kristof Feys, Jan 24 '14 at 08:55
IMHO, the `A` tag and `href` attribute is a really bad pair to use for this, as they already have defined behariour - i.e the page will scroll to that position. I would instead add a user-defined attribute to a div. I would also attach an onclick event handler to all of the target divs. I'll put together an example. — enhzflep, Jan 24 '14 at 08:55
Do you have to *move* the contents from one div to the other? Showing/hiding a div based on hash and corresponding ID would have the same visual effect, like this: http://jsfiddle.net/hn3U7/ — pawel, Jan 24 '14 at 08:59
Oh, you removed the javascript tag. Does that mean you want to find a solution *without* JavaScript? — Felix Kling, Jan 24 '14 at 09:09
@FelixKling it doesn't mean that... i was looking for a simple solution. — CJAY, Jan 24 '14 at 09:13
Well, tags usually indicate which technologies the solution can make use of. So if you remove the javascript tag, it means you are looking for solutions without JavaScript. If that wasn't your intention, you should add it back. — Felix Kling, Jan 24 '14 at 09:15

pawel · Accepted Answer · 2014-01-24T09:10:39.550

22

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

edited Jan 24 '14 at 09:10

answered Jan 24 '14 at 09:04

pawel

30,843
6
50
50

2

You should mention that `:target` isn't supported in IE8 and below. Otherwise, good job! – Felix Kling Jan 24 '14 at 09:14
how to do the same in bootstrap ? – Sanket Deshpande Sep 23 '16 at 19:21

caramba · Answer 2 · 2018-10-04T05:17:13.643

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

var target = document.querySelector('.target');
[...document.querySelectorAll('table a')].forEach(function(element){
    element.addEventListener('click', function(){
        target.innerHTML = document.querySelector(element.getAttribute('href')).innerHTML;
    });
});

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

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

@RahulDesai you are right! but in the question he writes "How can i do this???" this is an answer showing how he could do it... — caramba, Jan 24 '14 at 08:54
It wouldn't be bad to at least indicate to OP that you have a solution which is jQuery based etc... — Kristof Feys, Jan 24 '14 at 08:57
241.59 KB uncompressed or 27.85 KB minified and zopflinated. I don't know where you saw such small numbers. Comma in English means thousand, not decimal, separator. — Rodrigo, Jan 25 '18 at 14:25

score 2 · Answer 3 · edited Jan 24 '14 at 09:16

2

Put for div same name as in href target.

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

edited Jan 24 '14 at 09:16

Felix Kling

705,106
160
1,004
1,072

answered Jan 24 '14 at 08:51

Pixel Time

68
7

*"put for div you want to target."* That doesn't look like a proper sentence. Please [edit] your answer and be clarify it. – Felix Kling Jan 24 '14 at 09:13
Ah. That is actually unnecessary, because the `id` attribute has the same effect as the `name` attribute in this case. – Felix Kling Jan 24 '14 at 09:16

abinaya · Answer 4 · 2014-01-24T09:14:42.157

0

Try this code in jquery

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

edited Jan 24 '14 at 09:14

answered Jan 24 '14 at 09:03

abinaya

93
8

What is `$`? It's not a standard JavaScript function. – Felix Kling Jan 24 '14 at 09:06
Used jquery to get result – abinaya Jan 24 '14 at 09:15
Ah. If a question is not tagged with jQuery, you shouldn't provide a jQuery answer. Or at least you should also provide a non-jQuery solution. – Felix Kling Jan 24 '14 at 09:17

score 0 · Answer 5 · answered Jan 24 '14 at 09:04

0

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

});

});

});

answered Jan 24 '14 at 09:04

curositykiller

61
1
9

What is `$`? It's not a standard JavaScript function. Also your code is really hard to read. You could indent it properly at least. – Felix Kling Jan 24 '14 at 09:07
used for selection in jquery – curositykiller Jan 24 '14 at 09:10
Then you should at least *mention* that your are using jQuery. But if a question is not tagged with jQuery, you shouldn't provide a jQuery answer. – Felix Kling Jan 24 '14 at 09:11

score 0 · Answer 6 · answered Dec 16 '15 at 09:19

if you use

angularjs

you have just to write the right css in order to frame you div html code

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

JS Code(in your controller):

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

score 0 · Answer 7 · edited Sep 28 '17 at 11:50

0

easy way to do that is like

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

edited Sep 28 '17 at 11:50

Jonathan

6,339
5
36
44

answered Sep 28 '17 at 10:23

Ashish Ashturkar

11
2

How to target the href to div

7 Answers7

Linked

Related