button的点击事件和a的点击事件同时执行可以吗，就是点一下button既加啦active，又刷新页面
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"/><title></title><styletype="t...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
#button{
margin-left: 80px;
}
button{
margin-left: -7px;
border-radius: 0;
font-size: 14px;
padding: 6px 15px 6px 15px;
border: 1px solid;
background-color: #fff;
border-color: #ccc;
}
span{
color:#515a6e;
}
a:hover button{
background-color: #0099cc;
border-color: #0099cc;
}
a:hover span{
color: #fff;
}
.active{
background-color: #0099cc;
border-color: #0099cc;
}
.active span{
color: #fff;
}
</style>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(function(){
$('#button button').click(function(){
$('#button button').removeClass("active");
$(this).addClass('active');
return false;
});
});
</script>
<div id="button">
<a href="javascript:;" onclick="window.location.reload()"><button type="button" class="active" style="border-top-left-radius:3px;border-bottom-left-radius:3px;"><span>B1</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" ><span>B2</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" ><span>1F</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" ><span>2F</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" ><span>3F</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" style="border-top-right-radius:3px;border-bottom-right-radius:3px;"><span>4F</span></button></a>
</div>
</body>
</html> 展开
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
#button{
margin-left: 80px;
}
button{
margin-left: -7px;
border-radius: 0;
font-size: 14px;
padding: 6px 15px 6px 15px;
border: 1px solid;
background-color: #fff;
border-color: #ccc;
}
span{
color:#515a6e;
}
a:hover button{
background-color: #0099cc;
border-color: #0099cc;
}
a:hover span{
color: #fff;
}
.active{
background-color: #0099cc;
border-color: #0099cc;
}
.active span{
color: #fff;
}
</style>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(function(){
$('#button button').click(function(){
$('#button button').removeClass("active");
$(this).addClass('active');
return false;
});
});
</script>
<div id="button">
<a href="javascript:;" onclick="window.location.reload()"><button type="button" class="active" style="border-top-left-radius:3px;border-bottom-left-radius:3px;"><span>B1</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" ><span>B2</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" ><span>1F</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" ><span>2F</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" ><span>3F</span></button></a>
<a href="javascript:;" onclick="window.location.reload()"><button type="button" style="border-top-right-radius:3px;border-bottom-right-radius:3px;"><span>4F</span></button></a>
</div>
</body>
</html> 展开
1个回答
展开全部
可以啊，你跳转的时候给url添加一个参数，表示哪个按钮，js开始获取参数给相应的按钮添加active
追问
可以写一下代码吗
追答
<script>
$(function(){
$('#button button').click(function(){
$('#button button').removeClass("active");
$(this).addClass('active');
return false;
});
var btnid = window.location.search.substr(1).split("=")[1];
$("#button button").removeClass("active").eq(btnid).addClass("active");
});
</script>
<div id="button">
<a href="?btn=0"><button type="button" class="active" style="border-top-left-radius:3px;border-bottom-left-radius:3px;"><span>B1</span></button></a>
<a href="?btn=1"><button type="button" ><span>B2</span></button></a>
<a href="?btn=2"><button type="button" ><span>1F</span></button></a>
<a href="?btn=3"><button type="button" ><span>2F</span></button></a>
<a href="?btn=4"><button type="button" ><span>3F</span></button></a>
<a href="?btn=5"><button type="button" style="border-top-right-radius:3px;border-bottom-right-radius:3px;"><span>4F</span></button></a>
</div>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
