0

我有一个基于 MVC 4框架和 Bootstrap(twitter) 的 Web 应用程序，我想让我的一个页面成为一个带有 scrollspy 的单页导航：

我在整个网站的顶部都有一个固定的导航栏，在网站的一个页面中，我希望我添加一个带有 scrollspy 的侧栏（“nav nav-pills nav-stacked pull-left”）。

col-md-3 =在左侧将存储我的侧边栏

col-md-9 =在右侧将存储我的上下文

我尝试了不同的东西，但似乎没有任何效果，我注意到的一件事是我需要添加到 body 标签：

<body data-spy="scroll" data-target="#side-nav">

但在 MVC 中，主体标签位于“_layout”上，我不想触摸这个共享的局部视图。

我能做些什么 ？也许有人在 MVC 中实现了这个功能，可以给我一个小例子吗？

这是我的代码： 

@{
    ViewBag.Title = "Designer";
}

    <div class="row">


    <div class="col-md-3">
        @* Index *@
        <div class="nav-pills pull-left affix navspy">
            <div id="side-nav">
                <ul class="nav">
                    <li><a href="#general">General</a></li>
                    <li><a href="#words">Words</a></li>
                    <li><a href="#filetype">File Type</a></li>
                    <li><a href="#routes">Routes</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="col-md-9">

    <div id="general">
        @* Section Gereral *@
        <h2 class="page-header">Gereral</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div class="active" id="words">
        @* Section Words *@
        <h2 class="page-header">Words</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div id="filetype">
        @* Section File Type *@
        <h2 class="page-header">File Type</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

    <div id="routes">
        @* Section Routes *@
        <h2 class="page-header">Routes</h2>
        <p>Lorem ipsum dolor sit amet, vel cu fugit vitae electram, </p>
    </div>

</div>

</div>

<script>
    $(document).ready(function () {
        $('body').attr("data-spy", "scroll");
        $('body').attr("data-target", "#side-nav");

    });
</script>

我在这里缺少什么？

4

1 回答 1

0

您可以使用 javascript 为<body>标签动态添加属性。

将此脚本添加到滚动间谍所在的页面。当它被加载到 中_Layout时，属性将被添加到<body>标签中。

yourPage.cshtml

@{
    ViewBag.Title = "Designer";
}

@section scripts
{
    <script>
            $(document).ready(function(){        
                $( 'body' ).attr("data-spy","scroll");
                $( 'body' ).attr("data-target","#side-nav");  

            });
    </script>
}

[...]

共享\_Layout.cshtml

<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    [...]

        @RenderBody()       

    [...]

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", false)
</body>
</html>
于 2014-07-28T00:33:03.863 回答