How to Target The Href to Div

How to target the href to div

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

Using target on div without a href

As in this JS Fiddle, this is a CSS only solution, just replace your div's with a's and making use of the :target it will work the way you want:

   @charset"utf-8";
   /* CSS Document */   * {     box-sizing: border-box;   }   .row:after {     content: "";     clear: both;     display: block;   }   [class*="col-"] {     float: left;     padding: 15px;   }   .col-1 {     width: 8.33%;   }   .col-2 {     width: 16.66%;   }   .col-3 {     width: 25%;   }   .col-4 {     width: 33.33%;   }   .col-5 {     width: 41.66%;   }   .col-6 {     width: 50%;   }   .col-7 {     width: 58.33%;   }   .col-8 {     width: 66.66%;   }   .col-9 {     width: 75%;   }   .col-10 {     width: 83.33%;   }   .col-11 {     width: 91.66%;   }   .col-12 {     width: 100%;   }   .show {     display: none;   }   :target {     display: block;   }

<div id="dashboard" class="row">  <a href="#alarm" class="col-4" style="background-color:#009"></a>  <a href="#calendar" class="col-4" style="background-color:#C00"></a>  <a href="#weather" class="col-4" style="background-color:#0C0"></a></div><div id="alarm" class="row show">  <div class="col-12" style="background-color:#009"></div></div><div id="calendar" class="row show">  <div class="col-12" style="background-color:#C00"></div></div><div id="weather" class="row show">  <div class="col-12" style="background-color:#0C0"></div></div>

target specific div that is inside a href and all that is wrapped with main div for hover in css

You can use a descendant selector to select it. Here is some code:

<div id="ItemsEmployees">
    <a id="anchor" href="">
        <div class="itemHolder">
            <div class="nameTitle"></div>
        </div>
        <div class="item">
            <p>I want only this div to  have  hover style</p>
        </div>
    </a>
</div>

And then some CSS:

#anchor:hover .item {
    /* Do stuff here */
}

What this does is select #anchor (which is link, I added an ID) and when it hovers, effects .item, which is the paragraph element.

Here's a JSBin demonstrating with font-size.

javascript: target div in a href ...

Store your link inside the function instead of the href attribute:

<a href="#" onclick="url2div('http://www.bing.com', this)">Click</a>

Change JS to this:

function url2div(url, element) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', url);
    element.appendChild(iframe);
}

JSFiddle Demo #1

if you want to open the link in the same iframe, store the link in any other property other than href. Then, use your current function and it should work fine!

<a href="#" id="a.htm" onclick="url2div(this.id,'content')">Click</a>

JSFiddle Demo #2

how to use target child div without id in href?

You can replace href by a function with Element.scrollIntoView()

I edited in your demo:

Codepen

  <a onclick="srollToPosition(1)">1</a>
    <a onclick="srollToPosition(2)">2</a>
    <a onclick="srollToPosition(3)">3</a>
    <a onclick="srollToPosition(4)">4</a>

  <div class="slides">
    <div id="slide-1">
      1
    </div>
    <div id="slide-2">
      2
    </div>
    <div id="slide-3">
      3
    </div>
    <div id="slide-4">
      4
    </div>
    <div id="slide-5">
      5
    </div>
  </div>
</div>

Javascript:

const srollToPosition = (slideNumber) => {
  const slide = document
    .getElementById(`slide-${slideNumber}`)
    .scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
};

CMS in PHP - How to target href to div?

Instead of getting the links to target specific divs, you could always use anchor tags. They use the a tag to go to the relevant point on a page.

An anchor tag would be created like the following:

<a name="location1"></a>

To link to that with your a tag, you can then do:

<a href="#location1">Link Text</a>

That link will then take you to the anchor location on the page.

If you really want to do it by div ID and use jQuery (which will enable you to scroll to it rather than a straight jump), then if you create your link to something like the following :

<a href="#" onclick="scrollToLocation('location1')">Link Text</a>

If the page then has the div:

<div id="location1">Contrent of the div</div>

and your page has the function (either on page or in an external file) :

function scrollToLocation(location_id) {
    $('body').animate({
        scrollTop: $('#' + location_id).offset().top
    }, 500);
}

There's more information on Stack Overflow in the following questions:

• jQuery .scrollTop(); + animation
• jQuery jump or scroll to certain position, div or target on the page from button onclick

html - href div target not working

instead of the

target="viewer"

tag in the html use class tag

class="viewer"

How to display divs and nested divs using href target?

You have just missed out adding the text Option 1 in the HTML underneath the Option1.0 div

        <table border="0">
          <tr>
            <td>
              <hr>
              <a href="#Option1">
                Options
              </a>
              <br>
              <hr>
              </td>
          </tr>
        </table>

<div class="target">
    <div id="Option1">
         <a href="#Option1.0">Option 1</a>
    </div>

    <div id="Option1.0">
    Option 1
            <div id="Option1.1">
            Option 1.1
            </div>          

            <div id="Option1.2">
            Option 1.2
            </div>

    </div>

</div>

This is your demo updated

---

Related Topics