Jquery Replace content on click

Question

I want to replace the content of the #textoGrande div with an external file.

I intend to use each menu li to call the included div files, avoiding the page to be reloaded. My javascript include is empty... I don't know how to get started...

Here's the html structure:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type='text/javascript' src='include/javascript.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Opera</title>
</head>

<body>
    <div class="main">
        <div id="header">

            <h1 id="logo">
                <a href="#">Linux Logo</a>
            </h1>

            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Support</a></li>
            </ul>

            <div id="player"></div>

        </div>
    <div id="imagen"></div>
    <h2 id="textoGrande"><p>Opera ahora<br /> mas acojedor...</p>
    </h2><h3 id="textoPequeno"><p>En su nueva versión, Opera apuesta por un nuevo diseño y pestañas visuales, un motor más veloz que incrementa su velocidad en un 40% frente a su anterior versión y un mejor soporte de estándares.</p>

    </h3></div>


</body></html>

genesis · Accepted Answer · 2011-11-08 14:51:06Z

2

$("li a").live("click", function(){
       $("#textoGrande").load($(this).attr('href')+' body');    
       return false;
});

edited Nov 8, 2011 at 14:51

answered Nov 8, 2011 at 5:33

genesis

51.1k20 gold badges99 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Gabriel Meono Over a year ago

Thanks, but it's only loading itself # ... How do you make it work for an specific html?

Gabriel Meono Over a year ago

If I do that, for example <li><a href="test.html">Home</a></li> The entire page loads, the javascript doesn't seem to make any effect.

Gabriel Meono Over a year ago

Still not working, what am I doing wrong? Please check the live sample: gabrielmeono.com/working

genesis Over a year ago

@Gabriel: Try to use new jQuery, not sure if it will work but try to change 1.5.1 to 1.7

Gabriel Meono Over a year ago

I thought it was, but not quite, It's removing the old div, but it does load the new content...

|

genesis · Accepted Answer · 2011-11-08 14:52:56Z

0

$(document).ready(function() {
  $("li a").click(function() {
    $("#textoGrande").load($(this).attr('href'));
  });
});

edited Nov 8, 2011 at 14:52

genesis

51.1k20 gold badges99 silver badges127 bronze badges

answered Nov 8, 2011 at 5:34

GoalieGuy6

5223 silver badges10 bronze badges

1 Comment

Gabriel Meono Over a year ago

It contains a sintaxis error in line 3. And doesn't do anything, the page loads entirely.

Collectives™ on Stack Overflow

Jquery Replace content on click

2 Answers 2

10 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related