新闻列表+标题+内容切换

<!--新闻列表+标题+内容切换 S-->
<ul class="switch-nav clearfix hj-article-nav bor-top">

</ul>
<script id="news-nav-tem" type="text/html">
    <%for(i = 0; i < data.news.length; i ++) {%>
    <li data-name="<%=data.news[i].name%>" data-id="<%=data.news[i].id%>"
        data-src="<%=data.news[i].link%>" class="<%if(i==0){%>active<%}else{%><%}%> catagory"><a><span><%=data.news[i].name%><i class="line"></i></span></a>
    </li>  
    <%}%>
</script>
<div id="news_body">

</div>
<!--新闻列表 E-->
<script id="news-list-tem" type="text/html">
    <%for(var i in data.news) {%>   
    <div class="switch-item <%if(i==0){%>active <%}else{%><%}%>">
        <ul class="zd-news-list font28 clearfix">
            <%for(var j in data.news[i].articles) {%>
            <%if(j<6){%>
            <li class="clearfix">
                <a href="<?=Url::to(['news/news-detail'])?>?id=<%=data.news[i].articles[j].id%>">
                    <div class="news-list-img fl"><img src="<?=$imageHost?><%=data.news[i].articles[j].thumb_path%>"></div>
                    <div class="news-list-info fl">
                        <h2 class="font28 color-black"><%=data.news[i].articles[j].title%></h2>
                        <p class="info-word font24 color-gray"><span><%=data.news[i].articles[j].publish_at%></span></p>
                    </div>
                </a>
            </li>
            <%}%>
            <%}%>
        </ul>
        <div class="show-more-item" style="display:none;">
            <ul class="zd-news-list font28 clearfix">
                <%for(var j in data.news[i].articles) {%>
                <%if(j>=6){%>
                <li class="clearfix">
                    <a href="<?=Url::to(['news/news-detail'])?>?id=<%=data.news[i].articles[j].id%>">
                        <div class="news-list-img fl"><img src="<?=$imageHost?><%=data.news[i].articles[j].thumb_path%>"></div>
                        <div class="news-list-info fl">
                            <h2 class="font28 color-black"><%=data.news[i].articles[j].title%></h2>

                            <p class="info-word font24 color-gray"><span><%=data.news[i].articles[j].publish_at%></span>
                            </p>
                        </div>
                    </a>
                </li>
                <%}%>
                <%}%>
            </ul>
        </div>
        <a class="m-more morecondeition font24 color-light-gray bgfff bor-btm load-more">
           加载更多<i class="arrow-icon more-icon"></i>
        </a>
        <a href="<?=Url::to(['news/news-list'])?>?catagory=<%=data.news[i].id%>" class="m-more m-more-dealer-hide combinecondeition font24 color-light-gray bgfff bor-btm" style="display:none;">
           进入<%=data.news[i].name%>频道<i class="arrow-icon more-icon"></i>
        </a>
    </div>
    <%}%>
</script>
<script>
$(function () {
    var url = '/rest-api/get-home-elements';
    $.ajax({
        type: 'get',
        url: url,
        dataType: 'json',
        success: function (res) {
            var news_nav_html = template('news-nav-tem', res);
            $('.hj-article-nav').html(news_nav_html);
            
            var news_list_html = template('news-list-tem', res);
            $('#news_body').html(news_list_html);  
            
            //综述页面加载更多
            $(".load-more").click(function () {
                $(this).prev(".show-more-item").show();
                $(this).hide();
                $(this).next('.combinecondeition').show();
            });
            //标签切换
            var switch_tabs = $(".switch-nav");
            var switch_item = $(".switch-item");
            tabs_switch(switch_tabs, switch_item);
        }
   });
});
</script>

 

 

转载于:https://www.cnblogs.com/zouke1220/p/8203827.html