javascript - Div selected state

Hi people @stackoverflow, I'm currently trying to make a nav bar with the function of 'selected-state'.
I got it to work nicely with jsfiddle, / but the selected-state somehow isn't working when I create a html out of this. It's pretty much an exact copy of what I had in jsfiddle.
I tried to embed the jquery as a file and that didn't work either.

I can't seem to figure out why it's not working..
Please help!

<html>
<head>

<title>selected state test</title>

<script src="//ajax.googleapis/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
    $('.menu_button').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected')
    })
</script>

<style type="text/css">
.menu_button {
    padding: 10px 20px 10px 20px;
    position: relative;
    color: #666;
    float: left;
    border-left: 1px dotted #e5e5e5;
    font-size: 14px;
    cursor: pointer;
}

.menu_button:hover {
    color: #f26d7d;
}

.menu_button:active {
    color: #ccc;
}

.menu_button.selected {
    background-color: #ccc;
}
</style>

</head>
<body>

<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>

</body>
</html>

Hi people @stackoverflow, I'm currently trying to make a nav bar with the function of 'selected-state'.
I got it to work nicely with jsfiddle, http://jsfiddle/uphem/U7NLM/ but the selected-state somehow isn't working when I create a html out of this. It's pretty much an exact copy of what I had in jsfiddle.
I tried to embed the jquery as a file and that didn't work either.

I can't seem to figure out why it's not working..
Please help!

<html>
<head>

<title>selected state test</title>

<script src="//ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
    $('.menu_button').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected')
    })
</script>

<style type="text/css">
.menu_button {
    padding: 10px 20px 10px 20px;
    position: relative;
    color: #666;
    float: left;
    border-left: 1px dotted #e5e5e5;
    font-size: 14px;
    cursor: pointer;
}

.menu_button:hover {
    color: #f26d7d;
}

.menu_button:active {
    color: #ccc;
}

.menu_button.selected {
    background-color: #ccc;
}
</style>

</head>
<body>

<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>

</body>
</html>

Share Improve this question asked Aug 15, 2012 at 14:37 davidgogh 452 silver badges6 bronze badges

was the missing "http:" from the script src a typo when moving it here, or when trying the script? – SReject Commented Aug 15, 2012 at 14:39
@SReject I forgot to mention but I tried that too. developers.google./speed/libraries/devguide#jquery here you will see that they don't inclue it. I think it's because without "http:" you could utilize not only for http but also for https. – davidgogh Commented Aug 15, 2012 at 14:41
then remove the "//" from it :) – SReject Commented Aug 15, 2012 at 14:44
"//" means use same protocol as parent. If you request that in http it uses http for request and same thing for https. Just, it is not supported by older browsers. – Onur Topal Commented Aug 15, 2012 at 14:49
To expand a bit, using the double leading slashes (//) is protocol relative scheme. This will work fine (and remended!) if the file is actually being served from a server, but will fail if using the file:// protocol as the browser will request: file://ajax.googleapis..... – steveax Commented Aug 15, 2012 at 15:09

| Show 1 more ment

6 Answers 6

Sorted by: Reset to default 2

You have to load the jQuery code only after the page is loaded, like this:

<script type="text/javascript">
$(document).ready(function() {
    $('.menu_button').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected')
    })
});
</script>

as well, Could it be that your jQuery import call is wrong?

Try this:

<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>

for more information about when and how to use // instead of http:// read Is it valid to replace http:// with // in a ?

I've tried your code and it worked for me after that change

If you are working offline your jQuery call is wrong.

Use this

<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Use this code

<html>
<head>

<title>selected state test</title>

<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {
    $(".menu_button").click(function(e) {
        $(this).addClass("selected").siblings().removeClass("selected");
    });
});

</script>

<style type="text/css">
.menu_button {
    padding: 10px 20px 10px 20px;
    position: relative;
    color: #666;
    float: left;
    border-left: 1px dotted #e5e5e5;
    font-size: 14px;
    cursor: pointer;
}

.menu_button:hover {
    color: #f26d7d;
}

.menu_button:active {
    color: #ccc;
}

.menu_button.selected {
    background-color: #ccc;
}
</style>

</head>
<body>

<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>

</body>
</html>

Try adding:

    $(document).ready{
        $('.menu_button').click(function() {
          $(this).addClass('selected').siblings().removeClass('selected')
        });
    }

It's a problem with your src:

// this directs to yourdomain./ajax....
<script src="//ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>

//Instead use one of the following
<script src="ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>selected state test</title>

<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
        $('.menu_button').click(function() {
          $(this).addClass('selected').siblings().removeClass('selected')
        });
    });


</script>

<style type="text/css">
.menu_button {
    padding: 10px 20px 10px 20px;
    position: relative;
    color: #666;
    float: left;
    border-left: 1px dotted #e5e5e5;
    font-size: 14px;
    cursor: pointer;
}

.menu_button:hover {
    color: #f26d7d;
}

.menu_button:active {
    color: #ccc;
}

.menu_button.selected {
    background-color: #ccc;
}
</style>

</head>
<body>

<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>

</body>
</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Div selected state - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)