ansaurus

Question

Answer 1

A:

You should define the click behavior for your links for example :

$('a.opentab1').click(function() {
  $('#tabs-2, #tabs-3, #tabs-4').hide();
  $('#tabs-1').show();
});

your link should look like this : <a href="javascript:;" class="opentab1"></a>

Personally, what I'd do is modify a little bit your HTML:

First, define your links this way : <a href="javascript:;" class="opentab"></a>
Then, your tabs <div class="tab"></div>
Now, using JQuery, you'll just need to do something like this:

$('a.opentab').each(function(i) { $(this).click(function() { $('.tab').hide(); $('.tab:eq('+i+')').show(); }); });

(For some reason, I can't format it correctly, feel free to edit if you know how to do that :))

Here's your code modified:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui-1.7.2.custom.css"/>
<script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-ui-1.7.2.custom.min.js"></script>
        <script type="text/javascript">
                $(function(){

         //init
         $('.tab, .message').hide(); 
         $('.tab:eq(0), .message:eq(0)').show();


         //define click for every link
                        $('ul#tab-links a').each(function(i) {
          $(this).click(function() {
           $('.tab, .message').hide(); 
           $('.tab:eq('+i+'), .message:eq('+i+')').show();
          });
         });
                });
        </script>


</head>
<body>
<div id="wrapper">
  <div id="container">
    <div id="header">
     NAV GOES HERE
    </div>
    <div id="bannerArea">
    <div id="message-1" class="message">
    This is message 1
    </div>
    <div id="message-2" class="message">
    This is message 2
    </div>
     <div id="message-3" class="message">
    This is message 3
    </div> <div id="message-4" class="message">
    This is message 4
    </div>

    </div>
    <div id="prodInfo">
        <div id="tabs">
                <ul id="tab-links">
                        <li><a href="#tabs-1">Tab 001</a></li>
                        <li><a href="#tabs-2">Tab 002</a></li>
                        <li><a href="#tabs-3">Tab 003</a></li>
                        <li><a href="#tabs-4">Tab 004</a></li>
                </ul>
                <div id="tabs-1" class="tab">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum sem quis neque adipiscing nec consequat nisl varius. Curabitur tincidunt, ante sed pulvinar vestibulum, urna dui viverra ligula, quis tincidunt tellus urna quis orci. Fusce a lacinia ante. Donec suscipit tellus turpis. Quisque nec massa eget ante imperdiet imperdiet. Mauris eget aliquet neque. In nisi dui, dictum ut tempor at, consequat vitae lorem. Nullam a nunc enim, ut sodales magna. Nam bibendum metus nec nulla dignissim interdum. Praesent facilisis euismod tincidunt. Vivamus cursus, turpis sit amet cursus euismod, lorem mauris tincidunt justo, euismod tempor tortor urna ac est. Nunc elit magna, rutrum at tempus bibendum, scelerisque sit amet massa. Vivamus et lectus ante, id dictum augue. </p>
          </div>
                <div id="tabs-2" class="tab">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
                <div id="tabs-3" class="tab">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
                <div id="tabs-4" class="tab">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>

        </div>
    </div>
  </div>
</div>
</body>
</html>

Soufiane Hassou 2009-11-17 12:06:29

would it be possible for you to format this inline with my original code? i'm pretty new to JS and although i understand what you are asking my implementation is poor!

Bomski 2009-11-17 13:30:09

I edited my post with a new code.

Soufiane Hassou 2009-11-17 14:10:57

thanks for the edit; there is a syntax error in the code; two references to <script type>. Removing this however does not give me the desired effect (only the tabs are functional; the #message divs to not change respectively

Bomski 2009-11-17 14:30:26

Do you want the same effect for messages too ? (same as tabs)

Soufiane Hassou 2009-11-17 14:43:57

yes; apologies if this wasn't clear...

Bomski 2009-11-17 14:45:35

I edited again, hopefully, it's good now :-)

Soufiane Hassou 2009-11-17 14:47:02

@Soufiane... the Markdown messes up when you have code following a list item, I found this post over on meta (http://meta.stackoverflow.com/questions/3930/list-entry-followed-by-code-block-messes-up-the-code-section)

fudgey 2009-11-17 16:28:24

@fudgey Thanks :)

Soufiane Hassou 2009-11-17 17:01:49

ansaurus

tags:

views:

answers:

JQuery UI - link content areas to tabs

related questions