Home/ Questions/Q 8391281
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T19:13:09+00:00

Hi people @stackoverflow, I’m currently trying to make a nav bar with the function

  • 0

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.net/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.com/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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.com/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

    • 0