Clicking A Div Changes Another Div's Content

I'd like the content inside

to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I

Solution 1:

You can use jQuery, example:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#tab-tab_700964 a').on('click', function(){
      $('.tcw-content').html('hey');
    }); 
});
</script>

<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
    hello
</div>

Solution 2:

Go take a look at jQuery. It makes this pretty easy. Your example would look like this:

$('.grp a').click(function(e) {
    e.preventDefault();
    $('.tcw-content').html('new content goes here');
});

To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.

jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.

Solution 3:

Maybe you are looking for a content slider.

HTML Content Slider

:: Featured Content Slider v2.5

Examples

40 examples

Solution 4:

do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:

http://www.w3schools.com/jquery/event_click.asp

http://api.jquery.com/click/

Share