As Ricardo said, hover() expects a second function. I just tested your code
and it works just fine
like this:

$(document).ready(function() {

       $(".xtabber .tabcontent>div").not("#tab1").hide();
       $(".xtabber .tab a").hover(function () {
               var xone = $(this).attr("href");
               $(".xtabber .tabcontent>div").not(xone).hide();
               $(".xtabber .tabcontent>div"+xone).show();
       }, function(){});

       $(".ytabber ul").not("#taba").hide();
       $(".ytabber h3 a").hover(function () {
               var yone = $(this).attr("href");
               $(".ytabber ul").not(yone).slideUp("fast");
               $(".ytabber ul"+yone).slideDown("slow");
       }, function(){});
});

So, leaving out the second function causes some funny behaviour. I'd have
expected nothing to work.


On Fri, Nov 28, 2008 at 9:38 PM, ricardobeat <[EMAIL PROTECTED]> wrote:

>
> hover() is meant to be passed two functions, one for mouseover and one
> for mouseout: http://docs.jquery.com/Events/hover
>
> However that doesn't explain why just the second one doesn't work...
> see if using mouseover() or bind('mouseenter',fn) helps.
>
> On Nov 29, 12:16 am, Betty <[EMAIL PROTECTED]> wrote:
> > Thank you, brian. Here is the script:
> >
> > <script type='text/javascript' src='http://ajax.googleapis.com/ajax/
> > libs/jquery/1.2.6/jquery.min.js?ver=1.2.6'></script>
> > <script type='text/javascript'>
> > $(document).ready(function() {
> >         $(".xtabber .tabcontent>div").not("#tab1").hide();
> >         $(".xtabber .tab a").hover(function () {
> >                 var xone = $(this).attr("href");
> >                 $(".xtabber .tabcontent>div").not(xone).hide();
> >                 $(".xtabber .tabcontent>div"+xone).show();
> >         });
> >         $(".ytabber ul").not("#taba").hide();
> >         $(".ytabber h3 a").hover(function () {
> >                 var yone = $(this).attr("href");
> >                 $(".ytabber ul").not(yone).slideUp("fast");
> >                 $(".ytabber ul"+yone).slideDown("slow");
> >         });});
> >
> > </script>
> >
> > And the html is:
> > <div class="xtabber">
> >         <div class="tab">
> >                 <h3><a href="#tab1">tab1</a>/<a href="#tab2">tab2</a>/<a
> > href="#tab3">tab3</a></h3>
> >         </div>
> >         <div class="tabcontent">
> >         <div id="tab1">
> >                         <ul>
> >                         <li>tab1 item1</li>
> >                         <li>tab1 item2</li>
> >                         <li>tab1 item3</li>
> >                         </ul>
> >         </div>
> >         <div id="tab2">
> >                         <ul>
> >                                 <li>tab2 item1</li>
> >                                 <li>tab2 item2</li>
> >                                 <li>tab2 item3</li>
> >                         </ul>
> >         </div> <!-- end of tab2 -->
> >         <div id="tab3">
> >                         <ul>
> >                                 <li>tab3 item1</li>
> >                                 <li>tab3 item2</li>
> >                                 <li>tab3 item3</li>
> >                         </ul>
> >         </div> <!-- end of tab3 -->
> >         </div><!-- end of tabcontent -->
> > </div><!-- end of xtabber -->
> >
> > <div class="ytabber">
> >         <div>
> >                 <h3><a href="#taba">taba</a></h3>
> >                 <ul id="taba">
> >                         <li>taba item1</li>
> >                         <li>taba item2</li>
> >                         <li>taba item3</li>
> >                 </ul>
> >         </div>
> >         <div>
> >                 <h3><a href="#tabb">tabb</a></h3>
> >                 <ul id="tabb">
> >                         <li>tabb item1</li>
> >                         <li>tabb item2</li>
> >                         <li>tabb item3</li>
> >                 </ul>
> >         </div>
> >         <div>
> >                 <h3><a href="#tabc">tabc</a></h3>
> >                 <ul id="tabc">
> >                         <li>tabc item1</li>
> >                         <li>tabc item2</li>
> >                         <li>tabc item3</li>
> >                 </ul>
> >         </div>
> > </div>
> >
> > The xtabber and ytabber part can work individually. But if I put them
> > together like this, only the first one works. Please help me. Thank
> > you very much!
> >
> > On Nov 29, 3:05 am, brian <[EMAIL PROTECTED]> wrote:
> >
> > > I think you'll need to post the exact code you're having problems with.
> >
> > > On Fri, Nov 28, 2008 at 8:32 AM, Betty <[EMAIL PROTECTED]> wrote:
> >
> > > > Hi, I'm new. I've written two pieces of code with jQuery. Each of
> them
> > > > works well individually. However, if I put them one after the other,
> > > > the first one still works, but the latter one will not work. If I
> > > > change their order, it's always the first that can work and the
> latter
> > > > one that can't work. Both pieces are quite simple, and I don't think
> > > > there is anything conflicting between them. To be more clear, the
> code
> > > > is something like this:
> >
> > > > $("#button1").hover(function () {
> > > >  //do something
> > > > });
> > > > $("#button2").hover(function () {
> > > >  //do something else
> > > > });
> >
> > > > No matter in which order I put the two, the second one just doesn't
> > > > work. I just don't understand. Is there a special rule to "clear the
> > > > cache" of function() or something? Any help will be much appreciated!
>

Reply via email to