Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Can't get Div Content to change on link click.

    I have a div, with buttons positioned outside the div, acting as navigation for the content inside the div.
    The first button works as intended, it seems. I click on the first button and the div content shows. When I try to add more sections, the content shows in the div of the previous button.

    I'm wondering, what is the template/code for adding more functional sections?

    If you're not understanding what I'm going for, I'd like each button to correspond with different text within that one div.Div stays the same, text inside changes upon buttons clicking.

    I can't figure it out. Any help is appreciate. I am a beginner only, and even that title is going a bit far. I code based on tutorials so if you could put everything in layman's terms for me, that would be wonderful.


    Code:
    <style type="text/css">
    #button1 {position:fixed;top:200px;left:650px;}
    #button2 {position:fixed;top:300px;left:650px;}
    #button3 {position:fixed;top:400px;left:650px;}
    #button4 {position:fixed;top:500px;left:650px;}
    #content {border: 1px dashed black;width: 300px; height:500px;position:fixed;left:750px;top:150px;background: rgba(181, 142, 146, 0.5);color:black;font-size:10px;}
    </style>
    <div id="button1"><a href="#FAQ"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></a></div>
    <div id="button2"><a href="#Her"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></a></div>
    <div id="button3"><a href="#And"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></a></div>
    <div id="button4"><a href="#Enjoy"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></a></div>
    <div id="content">
    <div style="width:300px; height:500px;>
    
    <a name="FAQ"></a>
    
    This is where the FAQ will go. Things put here show fine.
    
    </div>

  • #2
    New Coder
    Join Date
    Apr 2013
    Posts
    16
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Not sure if this is what you want:
    http://jsfiddle.net/WQWFe/embedded/result/ (will be deleted in 24 hours)

    JQuery tab was used: http://jqueryui.com/tabs/
    Code:
    <!DOCTYPE html>
    <head>
    <style type="text/css" >
    .clear { clear: both;padding: 0;margin: 0; }
    #tabs ul { margin: 0; padding: 0; list-style: none; }
    #tabs ul a {
    	float: left;
    	padding: 5px;
    	display: block;
    	text-decoration: none;
    	margin-right: 1px;
    	color: #000000;
    	background-color: #cccccc;
    }
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
    <script>
    	$(function() {
    		$("#tabs" ).tabs();
    	});
    </script>
    </head>
    
    <body>
    <div id="tabs">
    	<ul>
    		<li><a href="#tab1"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></a></li>
    		<li><a href="#tab2"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></a></li>
    		<li><a href="#tab3"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></a></li>
    		<li><a href="#tab4"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></a></li>
    	</ul>
    	<br class="clear" />
    
    	<div id="tab1" class="tab-content">Invite</div>
    	<div id="tab2" class="tab-content">Her</div>
    	<div id="tab3" class="tab-content">And</div>
    	<div id="tab4" class="tab-content">Enjoy</div>
    </div>
    </body>
    Last edited by leev18; 07-31-2013 at 01:28 PM.

  • Users who have thanked leev18 for this post:

    Pinktober (08-01-2013)

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello!

    yes, that is exactly what I'm going for. The only problem is the website I'm putting this on does not allow javascript code.

    It has to be in pure css form.

    Is there a CSS version of this available to give me the same effect?

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    Hi, Dan!

    This is not the effect I want. I don't wish to hide anything. Everything must be displayed differently upon the click of a button, the div/content must not be hidden.

    Can anyone else contribute the CSS code for this?


  •  

    Posting Permissions

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