CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nerfux
Nerfux

Reputation: 15

Javascript fadeIn div tags fails on click

Im kind of new to javascript, and I have tried for several hours now to make this fadeIn function to work.

First of all, look at my code here.

I have also included the following in my header:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

This is how I want the page to work,

  1. When a user enters the site, the home selection will fadein
  2. The menu is based on <ul> and <li> itmes for categories and in each category we have different comapnies. Each category have a <a href="category-id"> and each company have a <a href='company-id'> to the div tag made later in the body.
  3. A user should be able to switch between the menu options, and each time the time should fade in.

So the problem as you see in my code, it works on page load, but I cant choose anything from the menu.

Any suggestions would be helpful

Upvotes: 1

Views: 97

Answers (3)

gskema
gskema

Reputation: 3221

If I understood correctly you wanted it to function something like this :

$('#menu a').click(function () {
    $("#content div").hide(); //Hide all content
    var id = $(this).attr('href');
    $(id).fadeIn(); // Show content for current tab
});

You didn't need this line (it is deleting the id) :

$("#menu li").attr("href", ""); //Reset id's

This is line I don't even know what it's for:

$(this).parent().attr("href", "current"); // Activate this google parent!

If you want to add a class to the current active menu item, use something like

$(this).parent().addClass('active');

Also you don't need to add '#' because you already had that in you href atrribute:

$($(this).attr('href')).fadeIn(); // Show content for current tab

You can check what kind of id you're getting by alerting it or logging it :

var id = $(this).attr('href');
alert(id);
$(id).fadeIn();

Upvotes: 1

Yves Lange
Yves Lange

Reputation: 3974

you are resetting the "href" attribute. Thus, when you try to make a fadeIn the "href" attribute value is changed to "current".

Those two lines:

$("#menu li").attr("href", ""); //Reset id's
....
$('#' + $(this).attr('href')).fadeIn();

are wrong because $(this).attr('href') is equal to "" (empty string)

also you made a mistake because you did

$("#content div:last").fadeIn(); // Show first tab content

but the command and what you expect are not coherent. Here you are using fadeIn on the last tab content instead of the first.

You can try something like this: http://jsfiddle.net/546Jn/4/

$(document).ready(function () {
    $("#content div").hide();
    $("#content div:first").fadeIn(); // Show first tab content

    $('#menu a').click(function () {
        $("div#content div").hide(); // Hide all pages
        $('div' + page).fadeIn(); // Show content for current tab
    });
});

Upvotes: 0

Nico O
Nico O

Reputation: 14102

Are you sure with this line of Code? $("#menu li").attr("href", "");

You do not override your ID here. You remove your link href.

Upvotes: 0

Related Questions