HTML的导航索引

关注

原创最新推荐文章于 2026-06-24 06:56:48 发布 2.9k 阅读 AI 写同款· GEO 优化 ›

一步一步实现字母索引导航栏作者：伯乐在线专栏作者 - lubootang 链接：http://web.jobbole.com/88889/ 链接：在线DEMO（http://www.luobotang.cn/index-sidebar/），源代码（https://github.com/luobotang/index-sidebar）这个索引导航栏的效果在很多 APP 中都有应用，我也是参考了一些 APP 的... 阅读详情

图片显示就是索引的结果

GetData

管理信息

考试信息

scrolling="no">

<!DOCTYPE html>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>GetData</title>
</head>
<body>
    <div>
        <table class="table table-bordered" style="height:100%;width:100%">
            <tr>
                <td>
                    <table valign="top" class="table table-bordered" style="height:100%;width:80px">
                        <tr><td style="background-color:azure">管理信息</td></tr>
                        <tr><td style="background-color:azure">&nbsp;<a href="" target="ifram">添加信息</a></td></tr>
                        <tr><td style="background-color:azure">&nbsp;<a href="" target="ifram">修改信息</a></td></tr>
                        <tr><td style="background-color:azure">&nbsp;<a href="" target="ifram">查询信息</a></td></tr>
                        <tr><td style="background-color:azure">考试信息</td></tr>
                        <tr><td style="background-color:azure">&nbsp;<a href="" target="ifram">模拟考试</a></td></tr>
                        <tr><td style="background-color:azure">&nbsp;<a href="Create" target="ifram">添加试题</a></td></tr>
                        <tr><td style="background-color:azure">&nbsp;<a href="mdeditor" target="ifram">查看错题</a></td></tr>
                    </table>
                </td>
                <td valign="top" style="height:auto">
                    <iframe name="ifram" style="height:600px;width:800px" frameborder="0" scrolling="no"></iframe>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

有几个重要点：

<iframe name="ifram" style="height:600px;width:800px" frameborder="0" scrolling="no"></iframe>
是一个可以呈现出你导航的控制器的方法名显示的页面


<tr><td style="background-color:azure">&nbsp;<a href="Create" target="ifram">添加试题</a></td></tr>
href中需要写入的是控制器中的方法名称——返回视图的名称
[HttpGet]
public ActionResult Create()
{
	return View();
}
target表示的是iframe这个标签的name名称