kjh.api.55128.cn_old/CP.Web/Views/Term/Index.cshtml

@{
    Layout = "~/Views/Shared/_zt.cshtml";
    Page.Title = "彩吧助手术语首页";
    Page.Description = "彩吧助手网彩票术语频道主要为广大彩民提供双色球术语、福彩3D术语、大乐透玩法术语等彩票术语知识和各种彩票玩法规则，希望能够帮助广大彩民玩转彩票";
    Page.Keywords = "福彩3D彩票术语,福彩3D彩票玩法,福彩彩票术语,3D常用术语,彩票常用术语";
    var list = new CP.Business.TermBLL().GetList();
}

<div class="wrap">
    <div class="navbar">
        <span>当前位置：</span><a href="/">首页</a> - 术语
    </div>
    <div class='container term'>
        <div class="title">
            <h1>术语</h1>
        </div>
        <div class='term-list-box'>
            <h2>
                @{
                    var nameList = list.GroupBy(p => p.typename).ToList();
                }
                @foreach (var item in nameList)
                {
                    if (nameList.IndexOf(item) == 0)
                    {
                        <span class='active'>@item.Key</span>
                    }
                    else
                    {
                        <span>@item.Key</span>
                    }
                }


            </h2>
            @foreach (var item in nameList)
            {
                var dataList = list.Where(p => p.typename == item.Key).ToList();
                if (nameList.IndexOf(item) == 0)
                {
                    <div class='term-item active'>
                        <ul class="tukulist">
                            @foreach (var _item in dataList)
                            {
                                <li><a href="/termdetails_@_item.id">@_item.headline</a></li>
                            }

                        </ul>
                    </div>
                }
                else
                {
                    <div class='term-item'>
                        <ul class="tukulist">
                            @foreach (var _item in dataList)
                            {
                                <li><a href="/termdetails_@_item.id">@_item.headline</a></li>
                            }

                        </ul>
                    </div>
                }
            }
        </div>
    </div>
</div>
<script>
    $('.term').on('click', 'h2 span', function () {
        var index = $(this).index();
        $('.term h2 span').removeClass('active');
        $(this).addClass('active');
        $('.term .term-item').removeClass('active');
        $('.term .term-item').eq(index).addClass('active');
    })
</script>