在 HTML 页面的另一个链接项中创建链接答案

【问题标题】：Creating a link within another link item in HTML page在 HTML 页面的另一个链接项中创建链接
【发布时间】：2024-01-09 19:37:01
【问题描述】：

我正在使用 Twitter Bootstrap 创建网站。

本网站中的一个页面显示了一个项目列表。

在每个项目框中，右侧有一个小x，用户应该能够单击它以从列表中删除项目。此外，单击列表项的常规区域可链接到该项的唯一页面。

请看我准备的JSFiddle：

JSFiddle Link

问题是我似乎无法在x 上添加链接。如果我尝试用

包围x

<a href="item2/delete">....</a>

布局分崩离析，如您所见here。

由于我使用的是 Bootstrap，我一直坚持使用它们的列表，这些列表基本上由链接组成（即<a> 标签）。尽管如此，有什么办法可以在其中包含我的x 之类的链接？

我已经尝试使用 Jquery 在 x 上创建一个侦听器，但它仍然不起作用（单击 x 会将您带到该项目的链接）。

请帮忙！

【问题讨论】：

请同时发布您的 jQuery 尝试...

标签： html css twitter-bootstrap tags href

【解决方案1】：

您可以添加 onclick 事件处理程序并防止导致页面被重定向的默认 onclick 事件。试试这个，我已经为你的第二个“X”按钮添加了一个 ID。

$('#linkTo').click(function(event){
    event.preventDefault();
    alert('hello');
});

DEMO

我想这就是你想要的。

【讨论】：

【解决方案2】：

查看演示，您是否正在寻找该演示

FIDDLE DEMO

$(function(){
    $('.glyphicon-remove').on('click',function(){

        return false;
    })
})

【讨论】：

【解决方案3】：

您可以使用相对包装器 + 绝对链接作为关闭按钮，如下所示：

<div class='wrap'>
            <a href="/proj/item/1" class="list-group-item"> 
                <img class="" style="float: left; padding-right: 20px;" src="http://www.clinicalflow.com/skins/common/icons/icon-check.gif" />
                <h4 class="list-group-item-heading">item 1</h4>         
                 <p class="list-group-item-text">Avail. since: 01/01/01</p>
            </a>
                <a hrerf='#' onclick="alert('assign delete link in href');" class="glyphicon glyphicon-remove"></a>
            </div>  
 <style>
.wrap{
    position:relative;
}
.glyphicon{
    position:absolute;
    right: 50px; top: 30px;
    width: 10px; height:10px;
    cursor:pointer;
}  
 </style>

js fiddle sample:http://jsfiddle.net/52VtD/8026/

【讨论】：