新闻切换

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/css/index.css

@@ -25,6 +25,9 @@ body{
 .c_case_content {
     display: none;
 }
+.hot_info_list_active {
+    display: none;
+}
 .tabs{
     margin-right: 18px;
 }
@@ -36,11 +39,13 @@ body{
     content: '';
     width: 4px;
     height: 18px;
-    background-color: #e56971
+    background-color: #aaa;
+}
+.c_toggle.active .tabs:before,.c_toggle:hover .tabs:before{
+    background-color: #e56971;
 }
 .tabs01:before {
     left: 99px;
-    background-color: #cbcaca
 }
 /*header*/
 .header{
@@ -806,14 +811,17 @@ body{
 .c_main .c_content .c_tab .c_toggle{
     font-size: 18px;
     font-weight: bold;
-    color: #333333;
+    color: #999;
 }
 .c_main .c_content .c_tab .c_toggle.active,.c_main .c_content .c_tab .c_toggle:hover{
     font-size: 18px;
     font-weight: bold;
-    color: #999999;
+    color: #333;
+}
+.c_main .c_content .c_tab .c_toggle span.tabs01:before{
+    background: #aaa;
 }
-.c_main .c_content .c_tab .c_toggle.active span.tabs01:before{
+.c_main .c_content .c_tab .c_toggle.active span.tabs01:before,.c_main .c_content .c_tab .c_toggle:hover span.tabs01:before{
     background: #e56971;
 }
 .c_main .c_content .c_item_list{
@@ -1510,7 +1518,13 @@ li.active a {
 .title_list_active {
     color: #999;
 }
-.title_list .title_list_active span {
+.title_list_active.active,.title_list_active:hover{
+    color: #333;
+}
+.title_list_active span {
+    background: #aaa;
+}
+.title_list_active.active span, .title_list_active:hover span{
     background: #e41f2b;
 }
 /*列表*/

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/assets/js/index.js

@@ -32,6 +32,12 @@ $(function () {
     $('.k_item_list').on('click', function () {
         $(this).addClass('active').siblings().removeClass('active');
     })
+    // 资讯
+    $('.title_list_active').on('click', function () {
+        var index = $(this).index();
+        $(this).addClass('active').siblings().removeClass('active');
+        $('.hot_info_list_active').eq(index).addClass('show').siblings().removeClass('show');
+    })
     // 滚动效果
     // function AutoScroll(obj){
     //     $(obj).find(".scroll:first").animate({

jpress-web-template-mallcms/src/main/webapp/templates/mallcms/index.html

@@ -1133,15 +1133,16 @@
 				<div class="x_content_row third_col">
 					<div class="x_item_title">
 						<ul class="title_list">
+							<li class="title_list_active active">
+								<span></span>最近资讯</li>
 							<li class="title_list_active">
-								<span></span>
-								最近资讯
-							</li>
-							<li><span></span>热门资讯</li>
+								<span></span>热门资讯</li>
 						</ul>
 						<a href="https://www.uuzcc.com/article/list/iczixun.html" class="x_gray_text">更多></a>
 					</div>
-					<div class="hot_info_list hot_info_list_active">
+					<div class="hot_info_list">
+						<!--最近-->
+						<div class="hot_info_list_active show">
 						<dl>
 							<dt>
 								<p>24</p>
@@ -1215,6 +1216,82 @@
 							</dd>
 						</dl>
 					</div>
+						<!--热门-->
+						<div class="hot_info_list_active">
+							<dl>
+								<dt>
+									<p>24</p>
+									<span class="x_gray_text">2019.09</span>
+								</dt>
+								<dd>
+									<a href="">64层128G的紫光存储器明年量产？</a>
+									<p class="x_gray_text">
+										在重庆召开的中国国际智能产业博览会上，紫光集团董事长赵卫国发表了演讲
+									</p>
+								</dd>
+							</dl>
+							<dl>
+								<dt>
+									<p>24</p>
+									<span class="x_gray_text">2018.08</span>
+								</dt>
+								<dd>
+									<a href="">64层128G的紫光存储器明年量产？</a>
+									<p class="x_gray_text">
+										在重庆召开的中国国际智能产业博览会上，紫光集团董事长赵卫国发表了演讲
+									</p>
+								</dd>
+							</dl>
+							<dl>
+								<dt>
+									<p>24</p>
+									<span class="x_gray_text">2018.08</span>
+								</dt>
+								<dd>
+									<a href="">64层128G的紫光存储器明年量产？</a>
+									<p class="x_gray_text">
+										在重庆召开的中国国际智能产业博览会上，紫光集团董事长赵卫国发表了演讲
+									</p>
+								</dd>
+							</dl>
+							<dl>
+								<dt>
+									<p>24</p>
+									<span class="x_gray_text">2018.08</span>
+								</dt>
+								<dd>
+									<a href="">64层128G的紫光存储器明年量产？</a>
+									<p class="x_gray_text">
+										在重庆召开的中国国际智能产业博览会上，紫光集团董事长赵卫国发表了演讲
+									</p>
+								</dd>
+							</dl>
+							<dl>
+								<dt>
+									<p>24</p>
+									<span class="x_gray_text">2018.08</span>
+								</dt>
+								<dd>
+									<a href="">64层128G的紫光存储器明年量产？</a>
+									<p class="x_gray_text">
+										在重庆召开的中国国际智能产业博览会上，紫光集团董事长赵卫国发表了演讲
+									</p>
+								</dd>
+							</dl>
+							<dl>
+								<dt>
+									<p>24</p>
+									<span class="x_gray_text">2018.08</span>
+								</dt>
+								<dd>
+									<a href="">64层128G的紫光存储器明年量产？</a>
+									<p class="x_gray_text">
+										在重庆召开的中国国际智能产业博览会上，紫光集团董事长赵卫国发表了演讲
+									</p>
+								</dd>
+							</dl>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>