bootstrap超链接无法正常工作

时间:2015-09-03 06:48:38

标签: html twitter-bootstrap hyperlink

我一直在尝试将实际的行设置为超链接(可点击),但似乎他们不想成为活动链接,我在Google上搜索并且网站上说要使用“a href”我已经完成但由于某种原因它不适合我,这是一个引导布局,如果有人可以帮助我,那将是太棒了,非常感谢

编辑:我尝试将“class ='clickable-row'data-href ='url:// link-for-first-row /'”添加到tr元素但是它仍然没有出现工作,我确实尝试更新jsfiddle链接,但当我尝试保存它以发布链接在这里jsfiddle数据从我的屏幕擦除。

https://jsfiddle.net/r6wctrwk/

<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<a href="#">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</a>
<a href="#">
<tr>
<td>Mary</td>
<td>Moe</td>
</tr>
</a>
<a href="#">
<tr>
<td>July</td>
<td>Dooley</td>
</tr>
</a>
</tbody>
</table>
</div>

1 个答案:

答案 0 :(得分:0)

根据我的评论,以下是akash提供的链接如何运作。

示例代码:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
</head>
<body>
<table>
<tbody>
    <tr class='clickable-row' data-href='http://google.com'>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>Column 3</td>
    </tr>
</tbody>
</table>
<script>
jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        alert("click");
        window.document.location = $(this).data("href");
    });
});
</script>
</body>
</html>

你可以包含类似这样的风格

<style>
    .clickable-row:hover{
         text-decoration: underline;
         cursor: pointer;
    }
    </style>