Home>

Share the code of a navigation click transformation style here,Recently, I have seen that the navigation style of many websites changes after clicking.Just use jqurey to implement this function today,Masters do not spray.

The screenshot of the running effect is as follows:

The online demo address 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>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Navigation Click Transformation Style</title>
<style>
* {margin:0;padding:0;border:0px;list-style:none;margin:0 auto;}
* a {text-decoration:none;color:#fff;}
ul {width:800px;height:30px;background-color:#c33;}
ul li {float:left;width:160px;height:30px;line-height:30px;text-align:center;color:#ffffff;}
ul li a {color:#ffffff;display:block;width:160px;height:30px;text-decoration:none;}
.first {background-color:#0000ff;}
ul li a:hover {color:#fff;display:block;width:160px;height:30px;text-decoration:underline;background-color:#03f;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document) .ready (function () {
  $("li"). each (function (index) {
  $(this) .click (function () {
  $("li"). removeclass ("first");
  $("li"). eq (index) .addclass ("first");
  });
  });
 });
</script>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">List</a></li>
<li><a href="#">Contents</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>
  • Previous Implementation of JAVA bubble sort and binary search
  • Next Android Bluetooth communication chat for sending and receiving functions