How to Link to a <Div> on Another Page

How to link to a div on another page?

Take a look at anchor tags. You can create an anchor with

<div id="anchor-name">Heading Text</div>

and refer to it later with

<a href="http://server/page.html#anchor-name">Link text</a>

How to make a whole 'div' clickable in html and css without JavaScript?

a whole div links to another page when clicked without javascript and
with valid code, is this possible?

Pedantic answer: No.

As you've already put on another comment, it's invalid to nest a div inside an a tag.

However, there's nothing preventing you from making your a tag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:block on your a tag and size / float it however you like.

If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.

Update:

In HTML5, placing a <div> inside an <a> is valid.

See http://dev.w3.org/html5/markup/a.html#a-changes (thanks Damien)

Clicking a link display it in Different Div on Same Page

Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/

Alt 2: Hide/show div in same html file:

HTML:

<div id="nav">
    <a href="#content1">Show content 1</a>
    <a href="#content2">Show content 2</a>
    <a href="#content3">Show content 3</a>
</div>

<div id="content1" class="toggle" style="display:none">show the stuff1</div> 
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>

jQuery:

$("#nav a").click(function(e){
    e.preventDefault();
    $(".toggle").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
});

Demo: http://jsfiddle.net/5NEu3/3/

Alt 3: Load from server ondemand:

To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.

Html

<a href="http:www.test.com/test1.html">Show content 1</a>
<a href="http:www.test.com/test2.html">Show content 2</a>

jQuery

$("#nav a").click(function(e){
        e.preventDefault();
        $('#maindiv').load($(this).attr("href"));
});

How to Link another page, at a certain point HTML

Okay after some trial and error and using the comments I think I fixed it allowing it to use the tag (also removed the hyperlink underline and color)
Credit for helping goes to Raptor & AlwaysHelping

This is linking button

<button> <a href="filename.html#locationlink1" style="text-decoration: none;">Button words</a></button>

This is the target div

<div id="locationlink1"></div>

And the CSS for color changing the hyperlink color to black

a
{
color: #000000;  
}

How can i link button in html to another class/div

Even Though you can achieve this with an anchor tag that is not the only way. With button element you can achieve this

HTML Button

div {  margin-top: 800px;  width: 100px;  height: 100px;  background: tomato;}

<button onclick="window.location.href='#abc'">Button</button><div id="abc"></div>

Open another page/content in another div HTML Javascript

Use jQuery's load() function. It'll do just just what you're looking for without Angular or framesets.

http://api.jquery.com/load/

HTML

<h1>My Website</h1>
<div class="nav">
    <ul>
        <li><a id="nav_a" href="#">Page A</a></li>
        <li><a id="nav_b" href="#">Page B</a></li>
    </ul>
</div>
<div id="content">Here's some default content (maybe Page A?)</div>

Javascript

$(function(){
    $("#nav_a").on("click", function(){
        $("#content").load("pageA.html");  
    });
    $("#nav_b").on("click", function(){
        $("#content").load("pageB.html");  
    });    
});

Note that you won't be able to load pages outside of your domain, but it doesn't sound like you're trying to do that.

---

Related Topics