一、效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9d0df2df8905a8a0202527a47708e821.jpeg)
二、前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Jquery分类</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
.templinkactive {
padding:5px;
text-decoration:none;
color:red;
}
.templink {
cursor:pointer;
padding:5px;
text-decoration:none;
}
table{
border:1px solid #ccc;}
table tr{
height:35px;}
</style>
<script type="text/javascript">
$(function () {
var alink01 = $("#linktype01").find("span");
alink01.click(function () {
alink01.each(function () {
$(this).removeClass("templinkactive").addClass("templink");
});
$(this).removeClass("templink").addClass("templinkactive");
$("#Brand").val($(this).attr("tag"));
SetPara();
});
var alink02 = $("#linktype02").find("span");
alink02.click(function () {
alink02.each(function () {
$(this).removeClass("templinkactive").addClass("templink");
});
$(this).removeClass("templink").addClass(