Solved

Dynamically change content of DIV box with a mouse click?

Posted on 2007-12-03
2
1,512 Views
Last Modified: 2010-08-05
I'm trying to set up a DIV box where the contents change when a hyperlink (or whatever via mouseclick) is clicked.  For example, I'd like to have a DIV box with links above it that will act as tabs for navigating the content within the DIV.  Is this possible with java/CSS?  If so, how do I do it?
0
Comment
Question by:slick_moe
2 Comments
 

Author Comment

by:slick_moe
ID: 20396828
Here's an exact example of what I'm trying to do: www.pgatour.com

About mid-way down, I'm trying to accomplish the same thing they did with the News/Columns & Blogs/Most Popular tabbed box.  How did they do this??
0
 
LVL 29

Accepted Solution

by:
Göran Andersson earned 500 total points
ID: 20396912
This is a rather elegant method, that I just came up with:
css:
 

.TabHeader { height: 25px; background: #ccc; }

.TabHeader a { float: left; padding: 0 5px; line-height: 25px; }
 

.Tab1 .Tab1Header,

.Tab2 .Tab2Header,

.Tab3 .Tab3Header { background: #eee; }
 

.TabContent { display: none; }

.Tab1 .TabContent1,

.Tab2 .TabContent2,

.Tab3 .TabContent3 { display: block; }
 

html:
 

<div id="Tabs" class="Tab1">

   <div class="TabHeader">

      <a class="Tab1Header" href="#" onclick="document.getElementById('Tabs').className = 'Tab1';">Tab 1</a>

      <a class="Tab2Header" href="#" onclick="document.getElementById('Tabs').className = 'Tab2';">Tab 2</a>

      <a class="Tab3Header" href="#" onclick="document.getElementById('Tabs').className = 'Tab3';">Tab 3</a>

   </div>

   <div class="TabContent TabContent1">

      Content 1

   </div>

   <div class="TabContent TabContent2">

      Content 2

   </div>

   <div class="TabContent TabContent3">

      Content 3

   </div>

</div>

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now