html关于文字滑动且单击显示不同内容的实现（静态网页3）

实现步骤

1，网页下载swiper插件（eg.swiper-4.5.0）

2，<link>标签：

<link rel="stylesheet" href="../css/swiper.min.css">

    <style>样式：

 <style>
.zoujin {font-size: 17px;}
		.zoujinheader {position: relative;}		
		.zoujinheader:after {content: " ";position: absolute;left: 0;bottom: 0;width: 100%;border-bottom: 1px solid #e0e0e0;
			color: #ccc;}
			/*content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。*/
		.zoujinheader a {display: block;width: 100%;text-align: center;padding: 10px 0 10px 0;position: relative;color: #888888;}
		.zoujinheader a.weui_navbar_item.weui_bar_item_on {background: transparent;}
		.zoujinheader a.active {color: #0f63bb;}	
		.zoujinheader a:after {content: none;}		
		.zoujinheader a.active:after {content: " ";width: 100%;display: block;position: absolute;border-bottom: 3px solid #0f63bb;bottom: 0;left: 0;}
		.a .b{display: none;} <!--display: none;就是不显示-->
		.a .b.c{display: block;}
</style>

3，<div>框架

<div class="zoujin">
		      <div class="zoujinheader">
			       <div class="swiper-container swiper-container-horizontal">
				      <div class="swiper-wrapper">
					     <a class="swiper-slide active">公司新闻</a>
					     <a class="swiper-slide">行业新闻</a>	
				      </div>
			       </div>
		      </div>
	     </div>
  <div class="a">
			<div class="b c">
				<div style="width: 100%;margin: 0 auto;">
			       <div  style="width:100%;max-width:750px;overflow:hidden;margin-top:0px;margin-bottom:5px;border-bottom: 1px solid #778899" >
    		          <div style="width:25%;float:left;">
    						    <img src="../img1/yi14_11.jpg" style="width:110px;height:110px">
    					    </div>
    					  <div style="width:75%;float:left;">
    			 			      <div style="font-size:12px;margin-top:20px">
    			 			        <span>观看恶劣开工建设的价格卢卡斯的积分公司的是法国大使馆</span>
    			 			      </div>	
                 			<span style="display:inline-block;margin-top:12px;margin-left:5px;color:rgba(0,0,0,0.5);">2018-05-12
                      </span>
    					  </div>
    	       </div>
    	       <div  style="width:100%;max-width:750px;overflow:hidden;margin-top:0px;margin-bottom:5px;border-bottom: 1px solid #778899" >
    		          <div style="width:25%;float:left;">
    						      <img src="../img1/yi14_11.jpg" style="width:110px;height:110px">
    					    </div>
    					    <div style="width:75%;float:left;">
    			 			     <div style="font-size:12px;margin-top:20px">
    			 			       <span>观看恶劣开工建设的价格卢卡斯的积分公司的是法国大使馆</span>
    			 			     </div>	
                 			<span style="display:inline-block;margin-top:12px;margin-left:5px;color:rgba(0,0,0,0.5);">2018-05-12
                      </span>
    					    </div>
    	       </div>
	      </div>
	    </div>	
	       <div class="b">
	        	<div style="width: 100%;margin: 0 auto;">
	        	    <div  style="width:100%;max-width:750px;overflow:hidden;margin-top:0px;margin-bottom:5px;border-bottom: 1px solid #778899" >
    		               <div style="width:25%;float:left;">
    						          <img src="../img1/xinwen_05.jpg" style="width:110px;height:110px">
    					         </div>
    					    <div style="width:75%;float:left;">
    			 			     <div style="font-size:12px;margin-top:20px">
    			 			         <span>观看开工建设的价格卢卡斯的积分公司的是法国大使馆</span>
    			 			     </div>	
                 			   <span style="display:inline-block;margin-top:12px;margin-left:5px;color:rgba(0,0,0,0.5);">2018-05-12
                         </span>
    					    </div>
    	          </div>
			       <div  style="width:100%;max-width:750px;overflow:hidden;margin-top:0px;margin-bottom:5px;border-bottom: 1px solid #778899" >
    		          <div style="width:25%;float:left;">
    						    <img src="../img1/yi14_11.jpg" style="width:110px;height:110px">
    					    </div>
    					    <div style="width:75%;float:left;">
    			 			     <div style="font-size:12px;margin-top:20px">
    			 			       <span>观看恶劣开工建设的价格卢卡斯的积分公司的是法国大使馆</span>
    			 			     </div>	
                 		 <span style="display:inline-block;margin-top:12px;margin-left:5px;color:rgba(0,0,0,0.5);">2018-05-12
                     </span>
    					    </div>
    	       </div>
	        </div>
	     </div>
    </div>

4,<script>脚本实现

 	<script src="../js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/swiper.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
			  var mySwiper = new Swiper('.swiper-container', {
				    speed: 4000,
				    slidesPerView:1,
				    spaceBetween: 10
			  });
			   $(".zoujinheader a").click(function() {
				 $(this).addClass("active").siblings().removeClass("active");
				 $(".a .b").eq($(this).index()).addClass("c").siblings().removeClass("c")
				//alert($(this).index());
			  });
   </script>

5，效果展示