Question

我正在使用Boostrap 2.x滑块在网页上显示一系列推荐，我从数据库中检索。

我的代码如下：

<div id="testimonials" class="carousel slide">

    <div class="carousel-inner">
        @foreach (var item in Model.Testimonials)
        {
            <div class="item" style="max-height:70px; overflow:hidden">
                <h4>@item.Title</h4>
                @item.Quote
            </div>
        }

    </div>
</div>

要使滑块起作用，需要将第一项设置为“活动”，否则显示的第一项为空白。如何将“活动”类添加到MVC中的第一个项目？

因此第一项应显示为

<div class="item active" style="max-height:70px; overflow:hidden">

而不是

<div class="item" style="max-height:70px; overflow:hidden">

在我的脚本文件中，我有：

$(document).ready(function () {
$('#testimonials').carousel({
    interval: 6000
});

$('#testimonials').carousel('cycle');
}

（此页面上有2个滑块）

感谢。

Answer 1

您可以检查循环中的第一项：

<div id="testimonials" class="carousel slide">
    <div class="carousel-inner">
        @{
             var i = 0;
             foreach (var item in Model.Testimonials)
             {
                 var itemClass = i++ == 0 ? "item active" : "item";
                 <div class="@itemClass" style="max-height:70px; overflow:hidden">
                     <h4>@item.Title</h4>
                     @item.Quote
                 </div>
             }
         }
    </div>
</div>

如果您的foreach属性是for类型或任何集合，

或将Model.Testimonials替换为IList<T>循环，哪些项目可以通过索引单独访问：

<div id="testimonials" class="carousel slide">
    <div class="carousel-inner">
        @for (int i = 0; i < Model.Testimonials.Count; i++)
        {
            var item = Model.Testimonials[i];
            var itemClass = i == 0 ? "item active" : "item";
            <div class="@itemClass" style="max-height:70px; overflow:hidden">
                <h4>@item.Title</h4>
                @item.Quote
            </div>
        }
    </div>
</div>

如果你想用JavaScript做到这一点，那么：

$(document).ready(function () {
    $('.carousel-inner .item:first').addClass('active');

    $('#testimonials').carousel({
        interval: 6000
    });

    $('#testimonials').carousel('cycle');
}

另外我建议你将style="max-height:70px; overflow:hidden"行移到css类：

.carousel-inner .item {
    max-height: 70px;
    overflow: "hidden";
}

在ASP.NET MVC中将活动类添加到动态Twitter Bootstrap轮播中

1 个答案: