- Has been a member for 0-1 years
Hi SportTipsWorld,
the link you sent me works perfectly on the link, but when I transferred the code to my html file, I didn’t have much luck with it. I can do the selection, but nothing appears below whichever choice I select. What do you think might be the problem?
THANKS ! on a very tight deadline here…
- Has been a member for 0-1 years
Thanks for the prompt reply!
What about if I want to replace the selection function with 5 buttons at the top?
SportTipsWorld said
With select option. http://jsfiddle.net/spliter/5xVDq/
- Has been a member for 0-1 years
Hi KamilWaheed,
Thanks for the solution and I could imagine it can do the trick easily..! Unfortunately I cannot get it to work after following all the procedures you’ve provided…
When I click the buttons, nothing happen except the page refreshes…
This is the code:
<!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> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>Untitled Document</title> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<style type=”text/css”> .mydivshow {display:block;} .mydivhide {display:none;} .mybutton myred {color:rgba(251,24,2,1);} .mybutton myblue {color:rgba(44,0,235,1);}.mybutton mygreen {color: rgba(38,253,54,1);} </style>
</head>
Div 1 Div 2 Div 3 ... ... ...<script type=”text/javascript”> var buttons = $(”#buttons”).find(“a”); $(“buttons”).click(function() { var id = $(this).attribute(“id”); $(“pages id”).css(“display”, “none”); $(“pages id:eq(“id“)”).css(“display”, “block”); }); </script>
I am very junior in terms of web design… Hope to hear from you soon!
Sweetee
KamilWaheed said
cgruber said
KamilWaheed saidThanks for the idea. If you view the source of the link I posted initially, that’s exactly what I have created. My question is how do I do this? (making it visible and invisible)
How about creating 3 divs with absolute position and only making visible the one that is in focus instead of changing the content within a single div?I would recommend you to use jQuery to achieve your target easily.
Here’s how to do this:
Add the following line inside head tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>Put the 3 buttons inside a div like this and assign them ids :<div id="buttons"> <a href="#" id="0" class="mybutton myred">Div 1</a> <a href="#" id="1" class="mybutton myblue">Div 2</a> <a href="#" id="2" class="mybutton myblue">Div 3</a> </div>Same thing for the pages, like this:
<div id="pages"> <div id="1" class="mydivshow">...</div> <div id="2" class="mydivhide">...</div> <div id="3" class="mydivhide">...</div> </div>Then, add the following lines inside the body tag.
<script type="text/javascript"> var buttons = $("#buttons").find("a"); $("buttons").click(function() { var id = $(this).attribute("id"); $("pages id").css("display", "none"); $("pages id:eq("+id+")").css("display", "block"); }); </script>
