jQuery idTabs plugin link options

Question

Hi,

I am using jQuery idTabs plugin. I want to give click link (href) feature and using default options with this feature. How can I do?

<ul class="idTabs"> 
 <li>
      <a href="#div_1" href="google.com">
      Hover call div_1 and Click Call go to google
      </a>
 </li> 
</ul>

Note: I am using hover feature > $("...").idTabs("!mouseover"); and I used this menu system.

Best Regards.

Answer 1

Here's a way to work around this plugin's limitation so that when you hover you see the contents of the DIV and when you click you navigate to the URL.

In the html add a custom attribute named "url" as follows:

<ul class="idTabs"> 
 <li>
      <a href="#div_1" url="http://www.google.com"&gt;
        Hover call div_1 and Click Call go to google
      </a>
 </li> 
</ul>
<div id="div_1">Contents of Div1</div>

In your jQuery script add the following:

$(function(){
 $(".idTabs").idTabs("!mouseover");
 $(".idTabs a").click(function(){
   var url = $(this).attr('url');
   if(url){
     window.location = url;
   }
 });
});

Answer 2

Not a bad solution Jose, but it isn't very SEO friendly. I'm having trouble modifying the script to use "rel" instead of "href".