当前位置： 文江博客话题详情

按钮超链接仅在选择在新标签中打开它们时起作用

发布于 2025-01-25 18:38:34 字数 3031 浏览 2 评论 0原文

这个似乎逃脱了我。

该代码生成围绕按钮（带有图像）的垂直菜单，所有“外观”都可以，但是当单击按钮时，什么也不会发生（尽管看来页面正在刷新）。

但是，如果我右键单击并选择“新选项卡中的打开链接”选项，则链接打开了。

我的研究（ 1 ， 2 ， 3 ）表明，通常情况下有一些原因有点javascript问题，但据我所知，这里不是这样。

如果我将＆lt; button class =“ button”＆gt;更改为＆lt; button type =“ button”＆gt;，则可以解决链接问题，但随后丢失了所有的问题格式化按钮（即.button css）。

关于我在这里缺少的东西有什么建议吗？还是在我们的工作场所环境中可能只是2013年的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>
原文

This one seems to have escaped me.

The code generates a vertical menu built around buttons (with images) and all 'looks' okay, but when clicking on the buttons nothing happens (although it appears the page is doing a refresh).

However, if I right-click and select the "Open link in new tab" option, the links open okay.

My research (1, 2, 3) shows that often the reason for this is there is some sort of javascript problem, but as far as I can tell that's not the case here.

If I change the <button class="button"> to <button type="button">, this resolves the linking issue but then loses all the formatting of the button (i.e. the .button CSS).

Any suggestions on what I'm missing here? Or is it likely to just be some SharePoint 2013 glitch in our workplace environment?

See code below:

<!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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

我偏爱纯白色 2025-02-01 18:38:34

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

.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>

Add both the type and the class see if it works.

.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>

回复 原文
~没有更多了~

关于作者

寂寞陪衬

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文