Question

我尝试使用bootstrap创建一个站点，其中一行表可以被点击。即，我希望它向我显示文本（单击此处查看Stackoverflow），以便当用户单击该表行时，它们将被定向到http://stackoverflow.com。

请注意，我不希望文本充当超链接;这将是微不足道的。我试图使整个.row元素成为一个超链接。

代码只是标准的引导表。

<div class="col-md-3">
    <div class="row">
        <p>Text here</p>
    </div>
    <div class="row">
        <p>More text</p>
    </div>
</div>

我尝试过的事情： 我尝试在行的顶部添加透明图片，并在与定位争吵之后，最终将其设置为行的背景图像。现在它并没有出现，即使它确实存在，仍然不会充当链接。

新手到bootstrap，愿意尝试几乎任何方法。

Answer 1

你应该创建一个id可以在Javascript中使用的div，如下所示：

＆＃13;

<div id='clickme'></div>

＆＃13;

然后你应该导入你将要制作的Javascript：

＆＃13;

<script type='text/JavaScript' src='yourFile.js'></script>

＆＃13;

然后你应该在.js文件中创建一个方法，该文件与你的html页面在同一个目录中，如下所示：

＆＃13;

var myMap = document.getElementById("clickme");
myMap.onclick = function() {
	var myVar = window.open("https://www.stackoverflow.com");
};

＆＃13;

我100％这对你有用。这将允许您使用此div创建所需的任何区域，如果单击其中的任何内容，则它将打开一个带有stackoverflow的新选项卡。

Answer 2

尝试使用Jquery函数，如下所示 在html页面上

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

JQuery功能

jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.document.location = $(this).data("href");
    });
});

Answer 3

var rows = document.querySelectorAll('.table .row');

[].slice.call(rows).forEach(function (el) {
    el.onclick = function (e) {
        window.open(el.dataset.href);
    };
});

<强> https://jsfiddle.net/DTcHh/8298/

使行项目成为bootstrap中的可单击链接

3 个答案: