Home/ Questions/Q 6667961
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T02:59:19+00:00

All my code seems to work except my javascript am I doing something wrong?

  • 0

All my code seems to work except my javascript am I doing something wrong?
Thanks Im only a beginner!

I am trying to make the background change when the mouse goes over the ‘Tags’ tab but it wont do it? What is going on?

HTML:

<html>
<head>
<script language="JavaScript" type="text/javascript">
// This changes color on mouseover, leaves existing color box.
$('.tab-item').mouseover(function() {
$(this).addClass("tab-mouseover");  
}).mouseout(function() {
$(this).removeClass("tab-mouseover");
});


// This changes color when clicked, removed old color box. 
$('.tab-item').click(function() {
$('.tab-item').removeClass("tab-selected");
$(this).addClass("tab-selected");
});-->
</script>
<link href="arg.css" rel="stylesheet" type="text/css" />

</head>
<body>


<div class="tab-item tab-selected" id="search-box">
Search
</div>
<div class="tab-item" id="tag-box">
Tags
</div>

</body> 
</html>

CSS:

.tab-item {
-moz-border-radius: 10px;
border-radius: 10px;
font: 14px helvetica;
color: #000;
height: 20px;
float: left;
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
position: relative;
width: 75px;
}

.tab-mouseover {
background: #bdbdbd;
}

.tab-selected {
background: #c0c0c0; 
}

Thanks!

James

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re using jQuery but haven’t included it.
    You also need to put your jquery code into the jquery ready event:

    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// This changes color on mouseover, leaves existing color box.

$(function(){
    $('.tab-item').mouseover(function() {
        $(this).addClass("tab-mouseover");  
    }).mouseout(function() {
        $(this).removeClass("tab-mouseover");
    });


// This changes color when clicked, removed old color box. 
    $('.tab-item').click(function() {
        $('.tab-item').removeClass("tab-selected");
        $(this).addClass("tab-selected");
    });
});
-->
</script>
    • 0