纯jq仿今日头条导航栏

最新推荐文章于 2022-07-22 23:27:45 发布

洗衣粉heart

最新推荐文章于 2022-07-22 23:27:45 发布

阅读量5.9k

点赞数 4

文章标签：今日头条导航

本文链接：https://blog.csdn.net/o3460765/article/details/53207482

版权

本文介绍了如何使用jQuery实现一个类似今日头条的导航栏效果。通过HTML、CSS和JavaScript，创建了一个响应式的导航条，当点击不同的列表项时，内容会平滑过渡到相应位置，并在点击时高亮选中项。同时，还实现了触屏设备上的滑动触摸效果，确保了良好的用户体验。

摘要由CSDN通过智能技术生成

几经改版啊，终于做出来个像样的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
	<style type="text/css">
		*{margin: 0; padding: 0; box-sizing: border-box; }
		html,body{width: 100%; overflow: hidden; } 
		ul{width: 400%; display: flex; list-style: none; }
		li{flex:auto; height: 200px; border: 1px solid cyan; text-align: center; }
		div{width: 100%; border: 1px solid red; overflow: hidden; }
		.font-red{color: red; }
	</style>
</head>
<body>
	<div>
		<ul>
			<li>二哥</li>
			<li>二哥二哥</li>
			<li>二哥</li>
			<li>二哥二哥二</li>
			<li>二哥</li>
			<li>二哥</li>
			<li>二哥二哥</li>
			<li>00二哥</li>
			<

最低0.47元/天解锁文章

洗衣粉heart

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
纯jq仿今日头条导航栏

几经改版啊，终于做出来个像样的 Document *{margin: 0; padding: 0; box-sizing: border-box; } html,body{width: 100%; overflow: hidden; } ul{width: 400%; display: flex; list-style: none; } li{flex:auto
复制链接

扫一扫