Thursday, 15 March 2012

JQuery Tabs, problem altering selected element -


I am using a project, the tabling code looks like this: -

 < Code> & lt; Script type = "text / javascript" charset = "UTF-8" & gt; $ (Function () {var tabContainers = $ ('div.tabs & gt; div'); tabContainers.hide (). Filter (': first'). Show (); $ ('div.tabs ul.tabNavigation a '). Click (function () {tabContainers.hide (); tabContainers.filter (this.hash). Show (); $ (' div.tabs ul.tabNavigation a '). RemoveClass (' selected '); $ (This) .addClass ('selected'); return false;}). Filter (': first'). Click ();}); & Lt; / Script & gt;  

It works great, but the design requires that I insert the tags selected tags on the tag, not the tag. When I change the script to show / hide it for each tab brake, and any ideas on what needs to be changed? thank you in advanced.

  & lt; Script type = "text / javascript" charset = "utf-8" & gt; $ (Function () {var tabContainers = $ ('div.tabs & gt; div'); tabContainers.hide (). Filter (': first'). Show (); $ ('div.tabs ul.tabNavigation li '). Click (function () {tabContainers.hide (); tabContainers.filter (this.hash) .show (); $ (' div.tabs ul.tabNavigation li '). Delete class (' selected '); $ (This) .addClass ('selected'); return false;}). Filter (': first'). Click ();}); & Lt; / Script & gt;  

Without further information, it is difficult to answer your question. The most important missing information is your current HTML and CSS, because now it can guess why this does not work.

As described by gnarf, your code should change a bit to work on it, for example the page used by HTML and CSS, on which you got this code:

  & lt; Script type = "text / javascript" charset = "utf-8" & gt; $ (Function () {var tabContainers = $ ('div.tabs & gt; div'); tabContainers.hide (). Filter (': first'). Show (); $ ('div.tabs ul.tabNavigation li A '). Click (function () {tabContainers.hide (); tabContainers.filter (this.hash). Show (); $ (' div.tabs ul.tabNavigation li '). RemoveClass (' selected '); $ (This) .clostest ('li'). AddClass ('selected'); Return return;}). Filter (': first'). Click ();}); & Lt; / Script & gt; In addition, your CSS should also be changed, because  selected  class is now set to LI on A instead of LI. I wonder why you do not use the tab-plugin provided by the jQuery UI it lets you configure a lot of things and no code is required. 


No comments:

Post a Comment