www.webdeveloper.com
Results 1 to 5 of 5

Thread: JQuery UI tabs not hiding/clearing content when active tab is changed

  1. #1
    Join Date
    Dec 2013
    Location
    Sanctuary
    Posts
    3

    JQuery UI tabs not hiding/clearing content when active tab is changed

    New to this web developer thing, and I'm looking for some help. I'm re-designing my portfolio website and instead of using a bunch of different static pages, I'm looking to use a tabbed set up to switch between content areas. I want to use the JQuery UI tabs function to do this. I want to click on a heading, and have the content in that tab active, while the other content is hidden until you click on the next tab. Below is the script I'm using:

    Code:
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#tabs" ).tabs();
      });
      </script>
    The problem I am having is that, when I click the different headings in the tabbed menu at the top of my page, the content doesn't change, nor does it hide any of the other tabbed content. It's all there, all the time.

    Example:
    JQuery UI Site
    Notice how, when you click the different tabs, it hides the content from the non-active ones. That is my desired end result.

    My Page
    Notice how all the content is there as soon as the page loads. The tabs I am referring to are the horizontal ones underneath the header image.

    I haven't altered the source code any other than the "Styles.CSS" to pass in my style sheet. I've gone through my HTML a few times to see if I'm missing things. I've cleaned it up and both the HTML and the CSS does pass W3c Validation. Not sure where to go from here. Thanks in advance!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    $("#tabs") refers to the element having its id attribute 'tabs' but there is no such element in your page source
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,325
    If your asking -> http://www.webdeveloper.com/forum/fo...ch-as-JScript) in this forum please.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Dec 2013
    Location
    Sanctuary
    Posts
    3
    Quote Originally Posted by Padonak View Post
    $("#tabs") refers to the element having its id attribute 'tabs' but there is no such element in your page source
    Thanks for the reply. I think I understood what you mean, but just in case I tried a few different things:

    -Changed the element from "tab" to "tabs" in the page source- It didn't solve the content issue and also "broke" the CSS
    -Changed the CSS name element to a few different things to pass in that style from the CSS- content did not hide, and the CSS elements did not take.
    -Commented out the offending "tab" section in the CSS that seems to be breaking the tab function- content still not hidden.

    IS there something I'm missing, about passing a CSS class onto an element in the page?
    For example:
    If i want the CSS properties to apply to the element <div id="tabs">, so i create a <div id="MenuItem"> in the page source before the "tabs" div to call in the "MenuItem" class, will one break the other?
    Is there an easier way to pass class elements from an external CSS sheet into a page element?

    Regardless, I've changed the names around and compared it to the source code and it's still not hiding the content.

  5. #5
    Join Date
    Dec 2013
    Location
    Sanctuary
    Posts
    3
    For the time being, I've fixed the page so it "looks" right, even though it doesn't really function.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles