求一个js效果

qingwadaxia_1 2017-08-15 11:28:09
和一般新闻手机网站一样 顶部有导航可以左右滑动
然后下面有文章列表 左右滑动可以切换文章内容 并且顶部的导航也会跟着一起对应变

比如顶部是：1,2,3,4

下面的内容是A,B,C,D

当我从A滑到B时 顶部导航也会对应变成2 类似这样的效果 不知道我说的清不清楚， 请大神提供源码 或者链接
...全文
562 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
DenggLin 2017-08-21
  • 打赏
  • 举报
 回复 

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>swiper.js手机触屏滑动选项卡标签切换代码</title>

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

<style type="text/css">
	*{margin:0;padding:0;font-family: "微软雅黑";}
		.wrap{margin:0 auto;}
		.tabs{height:32px;background: #5AA9F3;width: 100%;padding-top: 8px;text-align: center}
		.tabs .part{display:block;float:left;width:33%;color:#fff;text-align:center;height: 20px;}
		.tabs .part:first-child{border-right: 1px solid #ADDAFD;}
		.tabs a{width:70px;display:block;color:#fff;text-align:center;margin:0 auto;font-size:16px;text-decoration:none;padding-bottom: 2px;}
		.tabs span.active a{color:#fff;border-bottom: 2px solid #fff;}
		.swiper-container{width:100%;border-top:0;margin-top:10px!important}
		.swiper-slide{width:100%;background:none;color:#373737;}
		p{text-align: center;}
</style>

</head>

<body class="bgc_gray">

<div class="pg-main">

	<div id="wrapper">
		<!--header end-->
		<div class="wrap">
			<div class="tabs">
				<span class="part active"><a href="#" hidefocus="true" >全免费</a></span>
				<span class="part" style="border-right: 1px solid #ADDAFD"><a href="#" hidefocus="true">优惠券</a></span>
				<span class="part"><a href="#" hidefocus="true">个人免费</a></span>
			</div>

			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide swiper-slide-visible swiper-slide-active">
						<div class="content-slide">
							<p>当泪干血隐狂涌白雪纷飞都成空</p>
							<div></div>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="content-slide">
						<p>已经消失在风雨里</p>
						</div>
					</div>
					<div class="swiper-slide">
						<div class="content-slide">
							<p>一场雨把我困在这里</p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/swiper/idangerous.swiper.min.js"></script>
<script type="text/javascript">
	$(function() {

var tabsSwiper;
tabsSwiper = new Swiper('.swiper-container', {
	speed : 500,
	onSlideChangeStart : function() {
		$(".tabs .active").removeClass('active');
		$(".tabs span").eq(tabsSwiper.activeIndex).addClass('active');
	}
});

$(".tabs span").on('touchstart mousedown', function(e) {
	e.preventDefault()
	$(".tabs .active").removeClass('active');
	$(this).addClass('active');
	tabsSwiper.swipeTo($(this).index());

});

$(".tabs span").click(function(e) {
	e.preventDefault();
});


});//end
</script>


</body>
</html>
这个就可以，望采纳
肖施主 2017-08-17
  • 打赏
  • 举报
 回复
引用 6 楼 qingwadaxia_1 的回复:
这个是可以切换到对应页面的，之所以不能切换是因为没有其他业，其他业也要有除了ul的代码才能实现
老衲是光头 2017-08-17
  • 打赏
  • 举报
 回复
这里面有 http://www.superslide2.com/demo.html
VIctor_Ye 2017-08-16
  • 打赏
  • 举报
 回复
引用 7 楼 qingwadaxia_1 的回复:
引用 5 楼 victoryzn 的回复:
[quote=引用 3 楼 qingwadaxia_1 的回复:] [quote=引用 2 楼 victoryzn 的回复:] 请问你想用什么框架？
随便怎样都可以 js的框架
用Angular-ui-router， 进行路由切换，http://blog.csdn.net/victoryzn/article/details/74289442，这是我写得教程，还有实例演示，能满足你的需求，也好上手，便于理解。[/quote]这个感觉和tab切换差不多啊 我是想要滑动内容 切换顶部导航 或者点击顶部导航 可以切换下面的内容[/quote] Angular-ui-slider,原理肯定是和切换一样的，只是视觉效果不同，或者可以去bootstrap有这个效果的
qingwadaxia_1 2017-08-16
  • 打赏
  • 举报
 回复
引用 5 楼 victoryzn 的回复:
引用 3 楼 qingwadaxia_1 的回复:
[quote=引用 2 楼 victoryzn 的回复:] 请问你想用什么框架？
随便怎样都可以 js的框架
用Angular-ui-router， 进行路由切换，http://blog.csdn.net/victoryzn/article/details/74289442，这是我写得教程，还有实例演示，能满足你的需求，也好上手，便于理解。[/quote]这个感觉和tab切换差不多啊 我是想要滑动内容 切换顶部导航 或者点击顶部导航 可以切换下面的内容
qingwadaxia_1 2017-08-16
  • 打赏
  • 举报
 回复
引用 4 楼 a570295535 的回复:
把a标签的地址替换成自己的网址才可以： 
<script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>
<style>
	.nav { margin:0; padding:0; list-style-type:none;}
	.nav li { float:left; background:#FFD1A4; margin-right:1px; color:#fff; }
	.nav li a { display:block; width:120px; height:45px; line-height:45px; text-align:center; color:#fff; font-size:16px; text-decoration:none;}
	.curument{ background:#D96C00; font-weight:bold;}
</style>

<ul class="nav" id="nav">
  <li><a href="/">首页</a></li>
  <li><a href="1.html">文章列表1</a></li>
  <li><a href="2.html">文章列表2</a></li>
  <li><a href="3.html">文章列表3</a></li>
  <li><a href="4.html">文章列表4</a></li>
</ul>

<script type="text/javascript">
  var urlstr = location.href;
  var urlstatus=false;
  $("#nav a").each(function () {
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
      $(this).addClass('curument'); urlstatus = true;
    } else {
      $(this).removeClass('curument');
    }
  });
  if (!urlstatus) {$("#nav a").eq(0).addClass('curument'); }
</script>
这不是我要的效果啊 这个也不能滑动 也不能切换到对应页面
hongmei85 2017-08-15
  • 打赏
  • 举报
 回复
在什么网站上看到的，直接抄
VIctor_Ye 2017-08-15
  • 打赏
  • 举报
 回复
引用 3 楼 qingwadaxia_1 的回复:
引用 2 楼 victoryzn 的回复:
请问你想用什么框架？
随便怎样都可以 js的框架
用Angular-ui-router， 进行路由切换，http://blog.csdn.net/victoryzn/article/details/74289442，这是我写得教程，还有实例演示，能满足你的需求，也好上手，便于理解。
肖施主 2017-08-15
  • 打赏
  • 举报
 回复
把a标签的地址替换成自己的网址才可以： 
<script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>
<style>
	.nav { margin:0; padding:0; list-style-type:none;}
	.nav li { float:left; background:#FFD1A4; margin-right:1px; color:#fff; }
	.nav li a { display:block; width:120px; height:45px; line-height:45px; text-align:center; color:#fff; font-size:16px; text-decoration:none;}
	.curument{ background:#D96C00; font-weight:bold;}
</style>

<ul class="nav" id="nav">
  <li><a href="/">首页</a></li>
  <li><a href="1.html">文章列表1</a></li>
  <li><a href="2.html">文章列表2</a></li>
  <li><a href="3.html">文章列表3</a></li>
  <li><a href="4.html">文章列表4</a></li>
</ul>

<script type="text/javascript">
  var urlstr = location.href;
  var urlstatus=false;
  $("#nav a").each(function () {
    if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
      $(this).addClass('curument'); urlstatus = true;
    } else {
      $(this).removeClass('curument');
    }
  });
  if (!urlstatus) {$("#nav a").eq(0).addClass('curument'); }
</script>
qingwadaxia_1 2017-08-15
  • 打赏
  • 举报
 回复
引用 2 楼 victoryzn 的回复:
请问你想用什么框架？
随便怎样都可以 js的框架
VIctor_Ye 2017-08-15
  • 打赏
  • 举报
 回复
请问你想用什么框架？
1500个常用JavaScript特效
编辑整理的1500个前端开发常用JavaScript特效chm，包括了菜单效果、按钮效果、鼠标效果、页面效果、字符排版、计算、小游戏等的网页特效集，都是些较简单的JS特效。
HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果
Rainyday.js 是一个轻量的 JavaScript 库，利用 HTML5 Canvas 实现雨滴下落在玻璃表面的动画效果。Rainyday.js 尽可能的模拟现实的雨滴效果，几乎可以以假乱真了。
javascrip上百技术总集
js访问xml之节点对象属性和方法 js访问xml之删除一个book元素节点 js访问xml之添加一个book元素节点 【JS】兼容ff的加入收藏和设为首页 【补】【sina】绕过sina博客的限制，超级BT执行Javascript...
60个网页特效(js+flash)
在这个几盒内包括很多网页中常用的效果比如：顶部收缩广告效果、定时关闭的背投广告代码、JS图片卷帘门效果、随数字快速翻动幻灯代码等等，精心收藏的，分享出来，希望大家喜欢！
javascript简易的动画效果
JavaScript做一个简易的动画效果，主要还是要注意的是js部分 还是和往常一样创建一个HTML，如下图（开始操作）： 首先写一个div做成一个正方形盒子，内名为“box”，也可以给它写其他名，自由创作 再写两个div做...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章