asp.net - 在 ActionLink 中添加一个 div

Question

我有一个显示信息的磁贴，但还需要一个链接。如果用户单击磁贴上的任意位置，则需要将他们带到适当的操作。

下面是我创建的图像。

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，它将创建蓝色图 block ，但我不确定如何在 ActionLink 中获取三个子 div。

我尝试了以下 ActionLink:

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

这将创建以下图像:

那么基本上，我如何让磁贴链接到 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和 height , 然后让所有的 child <span>与 display: block .

例子:

<style type="text/css">
    .tile, .tile-text { display: block; }
    // You could add width and height to .tile if needed.
    // Also, if you want to put tiles next to each other, inline-block for .tile
    // would be more appropriate.
</style>

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