按钮超链接仅在选择在新选项卡中打开它们时才有效

Question

这个我好像没看懂。

代码生成了一个围绕按钮（带有图像）构建的垂直菜单，并且一切 'looks' 没问题，但是当点击按钮时没有任何反应（尽管看起来页面正在刷新）。

但是，如果我右键单击并 select“在新选项卡中打开 link”选项，link 可以正常打开。

我的研究 (1, 2, 3) 表明，造成这种情况的原因通常是存在某种 javascript 问题，但据我所知，这里并非如此。

如果我将 <button class="button"> 更改为 <button type="button">，这会解决 linking 问题，但会丢失按钮的所有格式（即 .button CSS ).

有什么关于我在这里遗漏的建议吗？或者它可能只是我们工作环境中的一些 SharePoint 2013 故障？

查看下面的代码：

<!DOCTYPE html>
<html>
<head>
<div style="background: #e5e5e5;padding:10px 15px;line-height:1.0!important;"> 
<style>

.button {
  height: 70px;
  width: 200px;
  display: block;
  padding: 10px 10px;
  margin: 20px 0px 10px 0px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
line-height: 1.0 !important;
  outline: none;
  color: #fff;
  background-color: #54969C;
  border: none;
  border-radius: 15px;
  box-shadow: 4px 8px #999;
}

.button:hover {background-color: #00C8D2}

.button:active {
  background-color: #00C8D2;
  box-shadow: 4px 4px #666;
  transform: translateY(4px);
}

.img {
  float: right;
}

</style>
</head>
<body style="background-color:#cccccc;">

<h2 style="font-weight:bold;color:#54969C;">Latest news and information</h2>

<a href="http://sharepoint/kpsites/SITR/SitePages/Intermediaries_calendar.aspx"><button class="button"><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_whats-on.png" alt="Document icon" style="width:46px;height:42px;float:right;"><p>What's on for tax professionals</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button class="button"><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_emerging-issues.png" alt="Document icon" style="width:63px;height:42px;float:right;"><p>Fortnightly emerging issues report - 20Apr-4May</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button class="button"><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_environmental-scan.png" alt="Document icon" style="width:61px;height:42px;float:right;"><p>Monthly environmental scan - Mar</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button class="button"><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_consultation-report.png" alt="Document icon" style="width:56px;height:42px;float:right;"><p>Consultation report</p></button></a>


</body>
</html>

Answer 1

同时添加类型和 class 看看它是否有效。

.button {
  height: 70px;
  width: 200px;
  display: block;
  padding: 10px 10px;
  margin: 20px 0px 10px 0px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
line-height: 1.0 !important;
  outline: none;
  color: #fff;
  background-color: #54969C;
  border: none;
  border-radius: 15px;
  box-shadow: 4px 8px #999;
}

.button:hover {background-color: #00C8D2}

.button:active {
  background-color: #00C8D2;
  box-shadow: 4px 4px #666;
  transform: translateY(4px);
}

.img {
  float: right;
}

<head>
<div style="background: #e5e5e5;padding:10px 15px;line-height:1.0!important;"> 
</head>
<body style="background-color:#cccccc;">

<h2 style="font-weight:bold;color:#54969C;">Latest news and information</h2>

<a href="http://sharepoint/kpsites/SITR/SitePages/Intermediaries_calendar.aspx"><button type="button" class="button"><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_whats-on.png" alt="Document icon" style="width:46px;height:42px;float:right;"><p>What's on for tax professionals</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button type="button" class="button"><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_emerging-issues.png" alt="Document icon" style="width:63px;height:42px;float:right;"><p>Fortnightly emerging issues report - 20Apr-4May</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button type="button" class="button"><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_environmental-scan.png" alt="Document icon" style="width:61px;height:42px;float:right;"><p>Monthly environmental scan - Mar</p></button></a>

<a href="http://sharepoint/kpsites/SITR/SitePages/TPERM.aspx" target="_blank"><button type="button" class="button"><img src="http://sharepoint/kpsites/SITR/PublishingImages/SitePages/TPERM/TPERM_consultation-report.png" alt="Document icon" style="width:56px;height:42px;float:right;"><p>Consultation report</p></button></a>


</body>

按钮超链接仅在选择在新选项卡中打开它们时才有效

Button hyperlinks only work when opting to open them in a new tab

html

css

hyperlink

sharepoint-2013