Asp.net mvc 在ASP.NET MVC中向动态Twitter引导转盘添加活动类

我使用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>

（此页上有2个滑块）

---

谢谢。

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

<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>

如果要使用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";
}

<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>

<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>

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

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

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

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