使链接执行2项操作

Before anything, I don't know if I'm taking the right approach to this so bear with me on this.

My problem is as follows: I'm trying to use an accordion where each tab is a category and when expanded, the accordion shows the artists in that category. So far, so good.

Now, the other part of what I'm trying to achieve is this: Once I click on the tab (which has a "#" link) I need to display the artists list in a div, which I was planning to do with AJAX. I can do this without problems if the link was INSIDE the accordion contents (for example, if I wanted to click on an artist) but can't figure out how to make it work when clicking a tab.

My code is as follows:

<li class="artistlist">
<a href="#">Photo</a>
<ul>
    <li><a href="artist.html">Artist</a></li>
    <li><a href="artist.html">Artist</a></li>
    <li><a href="artist.html">Artist</a></li>
</ul>
</li>
</ul>

<div id="contentbox">
<div id="artistcat">


</div>
</div><!-- /contentbox -->

and what I'm trying to do is the following: replace href=# with something like this: <a href="javascript:ajaxpage('ajaxed/abstrakt.html', 'contentbox');">Abstrakt</a>

thus, when clicking on a category (for example "photo") it expands the accordion (which it does) AND shows the content in the ajax box, which is exactly the same content of the accordion only with thumbnails.

So basically, I need to make that tab link do 2 actions: 1) expand the accordion and 2) show the ajax content.

I'm thinking that perhaps the AJAX solution is the wrong way, either way, any help will be greatly appreciated.

Try to use jQuery, and make a little piece of code that does what you need to.

Like

$('#contentbox').click( function() {
   $('#content').ajax( /* do ajax stuff */ );
   // animate accordion
});

If you can, use jQuery or some other library.

  • Use observers to trap click events. This way you seperate your html from your javascript.
  • use to do the ajax requests => you can do multiple things "on succeed" and throw clean errors when the ajax requests fail.
  • your library will also give you the tools to trigger multiple observers "onClick"