Home>

The screenshot of the running effect is as follows:

The background image tab.gif used is as follows:

The specific code is as follows:

<! Doctype html public "-//w3c //dtd xhtml 1.0 transitional //en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery + css horizontal navigation menu</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
  $("ul>li"). click (function () {
    $("ul>li"). each (function () {$(this) .removeclass ("_ lishow");});
    $(this) .addclass ("_ lishow");
  });
});
</script>
<style type="text/css">
ul
{
  list-style-type:none;
  border:0px blue solid;
  height:27px;
  width:480px;
}
ul li
{
  list-style-type:none;
  float:left;
  width:74px;
  height:27px;
  line-height:27px;
  text-align:center;
  background-color:#ccccff;
  background:url (../images/tab.gif);
  background-position:-74px 0px;
}
ul li:hover
{
  cursor:pointer;
}
._lishow
{
  background:url (../images/tab.gif);
  background-position:0px 0px;
}
</style>
</head>
<body>
  <div>
    <ul>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
      <li>menu5</li>
      <li>menu6</li>
    </ul>
    <br />
  </div>
</body>
</html>
  • Previous In-depth analysis of error handling in javascript
  • Next Example of simple switching menu with jQuery + CSS