a标签做按钮效果，并实现单选效果

效果图：

css代码：

---

.my_link_button {
    display: block;
    width: 100px;
    height: 30px;
    background: #FFFAFA;
    margin-top: 20px;
    font-size: 8px;
    text-decoration:none;
    text-align: center;
    line-height: 28px;
    color:#999999;
}

.my_link_button_select {
    display: block;
    width: 100px;
    height: 30px;
    background: #0081c2;
    margin-top: 20px;
    font-size: 8px;
    text-decoration:none;
    text-align: center;
    line-height: 28px;
    color:white;
}

.my_link_button:hover{
    text-decoration:none;
    color: white;
    background:#0081c2
}

 html代码：

<a style="width:100%;margin-top: 5px;" href="#" name="mylink" class="my_link_button">用户管理</a>
<a style="width:100%;margin-top: 5px;" href="#" name="mylink" class="my_link_button">部门管理</a>
<a style="width:100%;margin-top: 5px;" href="#" name="mylink" class="my_link_button">角色管理</a>

js代码： 

$("a[name='mylink']").removeClass("my_link_button_select")
$(this).addClass("my_link_button_select")

这里使用了name来移除选择效果，如果多组的话可以加入自定义属性 如group来区分 示例：

<a style="width:100%;margin-top: 5px;" href="#" group="mylink" class="my_link_button">用户管理</a>
<a style="width:100%;margin-top: 5px;" href="#" group="mylink" class="my_link_button">部门管理</a>
<a style="width:100%;margin-top: 5px;" href="#" group="mylink" class="my_link_button">角色管理</a>

这里将name换成了group 相应使用jquery选择器的时候就要用group来区分

$("a[group='mylink']").removeClass("my_link_button_select")

$(this).addClass("my_link_button_select")