Adding style to Header when div is clicked using Javascript_问答_开发者

My intent is to add a class to the header when a div is clicked. I have included the website I'm working with, just to make thing's easier:

URL - http://itsmontoya.com/work/iM/

I have added a class 'expanded' to the header. This is to show how the navigation should look after the button has been pressed. I created a simple Javascript which is supposed to provide an alert when I click the button. I can't seem to get this to work. Any ideas of what I did wrong?

Thanks!

EDIT - I was able to get the alert to properly work when clicking the button div. I'm very close to having this complete! :) Now I'm getting stuck with the variable not passing correctly.

<script type= "text/javascript">
var expanded = false;
function btnClick(){
    alert('The variable expanded is '+expanded);
    if(expanded === false) {
        document.getElementById("header").className = "expanded";
        var expanded = true;
    } 开发者_如何学JAVAelse {
        document.getElementById("header").className.replace(/\bexpanded\b/,'');
        var expanded = false;
    }
};
</script>

I'm updating the ftp server now :)

When using jQuery, you have to bind your events in such a way that the elements have already loaded.

You have:

<script type= "text/javascript">
$("#expandBtn").click(function(){
   alert('hello');
});
</script>

I think what you want is:

<script type= "text/javascript">
$(document).ready(function(){
  $("#expandBtn").click(function(){
     alert('hello');
     $('header').addClass('expanded');
  });
});
</script>

The API documentation is going to be your friend here. First step -- ready().

UPDATE

You have this call to jQuery:

$j('#header').addClass('expanded');

But your markup is for the HTML5 element <header>. In that case your jQuery needs to change to:

$j('header').addClass('expanded');

Where $j is your jQuery object. More typically you would use $ or jQuery.

Time to bone up on jQuery Selectors!

UPDATE

Here's your updated page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>itsMontoya</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type= "text/javascript">
    $(document).ready(function(){
        $('.expandBtn').bind('click', function(){
            $('header').toggleClass('expanded');
        });
    });
    </script>
</head>
<body>
    <div class="wrap">
        <header id="header" class="">
            <div class="blackBG transparent"></div>
            <nav>
                <ul>
                    <li>
                        Home<img src="images/home.png">
                    </li>
                    <li>
                        Pictures<img src="images/pictures.png">
                    </li>
                    <li>
                        Music<img src="images/mymusic.png">
                    </li>
                    <li>
                        About Me<img src="images/aboutme.png">
                        </li>
                    <li>
                        Resume<img src="images/resume.png">
                    </li>
                </ul>
            </nav>
            <div id="logo" class="logo"><p>itsMontoya</p></div><div id="expandBtn" class="expandBtn anchor"></div>
        </header>
        <section class="content">
            <article class="blogEntry"></article>
        </section>
        <footer class="anchor">
            <div class="over anchor"><p>2011 itsMontoya.com</p></div>
            <div class="blackBG transparent anchor under"></div>
        </footer>
    </div>
</body>
</html>

Using jQuery:

$('#your_div_id').click(function(){
    console.log("Clicked.");
    $("#header").addClass('expanded');
});

Update

In your code:

var expanded = false;
function btnClick(test){
    if($expanded === false) {
        .
        .
        .

What the heck is $expanded? Notice that in JavaScript we don't need the $ sign for variables.

This is how you would bind a click handler to your div and add the class to your header:

var yourDiv = document.getElementById('your-div-id');
var header = document.getElementById('header');

yourDiv.onclick = function(){
    alert("yourDiv was clicked");
    header.className = "newCssClass";
};

The above assumes markup like so:

<div id="your-div-id">Click</div>
<div id="header"></div>

Here's an example.

Update: The reason that the expanded variable isn't working as you'd expect is because you're creating a duplicate local variable called expanded in your btnClick() method. As a result, the global expanded variable you declare outside the function is never updated.

This is being caused by how you're using the var keyword:

When used outside a function, var creates a global variable that's accessible anywhere within the current document.
When used inside a function var creates a local variable that is accessible only within that function.

Here's your function cleaned up to work as you'd expect:

// Define global variable (using var outside function)
var expanded = true; 
function btnClick(){   

    alert('The variable expanded is '+expanded);

    // Condition for true
    if(expanded) {
        // do something

    // Condition for false
    } else {
        // do something else
    }

    // Flips boolean value of the global variable (notice lack of var keyword)
    expanded = !expanded;    
}

Here's an example showing the correct way to update the expanded variable.