Page 2 of 2 FirstFirst 12
Results 11 to 14 of 14

Thread: div content change by menu

  1. #11
    Join Date
    Apr 2012
    Posts
    63
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    yea i know about the hover pseudo
    i just meant that by giving every menu div 2 classes you can still call the javascript upon every button (because they have one identical class) and call the css on the second class so you can have diff effects etc. on each button aswell

  2. #12
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by kimikai View Post
    I know there's a way to do this and I've done something similar before, but right now I just cant seem to get it right
    i implemented the html part into a wrapper div for the menu and i put the javascript part in <script type="text/javascript></script> brackets at the bottom of my html page right above </body>
    Did you put the jquery.js on your page? This works:
    Code:
    <!doctype html>
    
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    
    <title></title>
    
    </head>
    
    <body>
    
    <div class="item-1 content-item" style="background: red; width: 170px">
        I am the content for item 1
    </div>
    
    <div class="item-2 content-item" style="display: none; background: yellow; width: 170px">
        I am the content for item 2
    </div>
    
    <div class="item-3 content-item" style="display: none; background: blue; color: white; width: 170px">
        I am the content for item 3
    </div>
    
    <ul>
        <li class="change-item" data-item="1">Item 1</li>
        <li class="change-item" data-item="2">Item 2</li>
        <li class="change-item" data-item="3">Item 3</li>
    </ul>
    
    
    <script>
    $('.change-item').click(function(){
        var this_item = $(this).attr("data-item");
        $('.content-item').hide();
        $('.item-' + this_item).fadeIn();
    });
    </script>
    
    </body>
    
    </html>

  3. #13
    Join Date
    Apr 2012
    Posts
    63
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    ye i got it working now too tho...it doesnt matter if you add the new jquery.js from google or the 1.3 version right?

  4. #14
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,395
    Thanks
    32
    Thanked 153 Times in 147 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by kimikai View Post
    ye i got it working now too tho...it doesnt matter if you add the new jquery.js from google or the 1.3 version right?
    It doesn't matter.

Similar Threads

  1. Change content of div as slideshow changes
    By svoltmer in forum JavaScript
    Replies: 2
    Last Post: 08-02-2012, 09:35 PM
  2. Tab Content Script: Change content selector to class
    By konstikonst in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 02-05-2011, 08:50 PM
  3. Change content after x seconds?
    By PeterA in forum JavaScript
    Replies: 2
    Last Post: 10-12-2009, 12:54 PM
  4. Content Change
    By ryno in forum Other
    Replies: 2
    Last Post: 07-22-2006, 04:48 PM
  5. change page content with div tag
    By techie_ns in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-27-2006, 05:00 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •