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!
