2

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

下面是我创建的图像。

在此处输入图像描述

的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" })

这将创建以下图像：

在此处输入图像描述

所以基本上，我如何让磁贴链接到动作并且仍然在其中包含所有三个子 div？

4

3 回答 3

2

如果需要，您可以在 上添加一个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并包含适当的widthand height，然后将其所有子元素设为<span>with 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>
于 2012-05-20T15:20:38.140 回答
0

这是 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>
于 2012-05-20T15:51:30.340 回答
0

您需要将蓝色瓷砖作为实际图像。这个可点击的图像应该放在一个 div 中。

使用 CSS，您可以使用 z-index / 绝对定位将图像放在文本内容后面。

于 2012-05-20T15:21:59.097 回答