Question

我有一个显示信息的磁贴，但也需要一个链接。如果用户点击磁贴上的任何位置，则需要将其带到相应的操作。

下面是我创建的图片。

enter image description here

HTML

    <div class="tile">
        <div class="tile-text">Runs</div>
        <div class="tile-text details">Manage runs, routes, races, and goals</div>
        <div id="runs" class="tile-text live">You have a four mile run today</div>
    </div>

现在，如果我创建一个ActionLink，它将创建蓝色磁贴，但我不确定如何在ActionLink中获取三个子div。

我尝试过以下ActionLink：

@Html.ActionLink("Runs", "Index", "Run", null, new { @class = "tile-text" })

这会创建以下图像：

enter image description here

基本上，我如何让tile链接到Action并且仍然拥有所有三个子div？

Answer 1

您可以在onclick="window.location.href='link'" tile上添加<div>属性，并使用cursor: pointer设置样式，以便在需要时将其设置为链接。

示例：

<div class="tile" onclick="window.location.href='link'">
    <div class="tile-text">Runs</div>
    <div class="tile-text details">Manage runs, routes, races, and goals</div>
    <div id="runs" class="tile-text live">You have a four mile run today</div>
</div>

或者您可以将tile <div>设为<a>元素并将其设置为display: block，并包含相应的width和{{1然后使用height生成所有子项<span>。

示例：

display: block

Answer 2

您需要将蓝色图块作为实际图像。此可点击图像应放在div中。

使用CSS，您可以使用z-index / absolute positioning将图像放在文本内容之后。

Answer 3

这是Radu选项2的快速实现。你现在需要做的就是整理它并将内联css移动到你的名为title的类的css中。

<body>  
<a class="tile" href="#" style="width: 200px; height: 300px; background-color: lightblue; display: block;">
    <h3 class="tile-text">Runs</h3>
    <p class="tile-text-details">Manage runs, routes, races, and goals</p>
    <p class="runs" class="tile-text-live">You have a four mile run today</p>
</a>
</body>

在ActionLink中添加div

3 个答案: