Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Dynamically change content of DIV box with a mouse click?

Posted on 2007-12-03
2
Medium Priority
?
1,538 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 1500 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

972 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