flask左边导航栏，右边内容，阻止页面跳转问题jquery引用

最新推荐文章于 2024-07-30 10:27:19 发布

南师大蒜阿熏呀

最新推荐文章于 2024-07-30 10:27:19 发布

阅读量922

点赞数

文章标签： flask jquery javascript

本文链接：https://blog.csdn.net/THREEFUCT/article/details/129813158

版权

测试界面test.html

<!DOCTYPE html>
<html>
<head>
	<title>Index Page</title>
	<!--远程调用-->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<!--百度-->
	<script src="http://libs.baidu.com/jquery/3.6.0/jquery.min.js"></script>
	<!--boot-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <!--flask引用，要求建立sattic文件，就是如下部署-->
    <script src="{{ url_for('static', filename='codejs/jquery-3.6.0.min.js') }}"></script>
    <!--本地引用-->
	<script src="codejs/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function() {
			// 当点击链接时
			$("a.special").click(function(event) {
				event.preventDefault(); // 阻止默认跳转行为
				var href = $(this).attr("href"); // 获取链接地址
				$.ajax({
					url: href, // 发送异步请求
					success: function(response) {
						$("#content").html(response); // 在页面中显示返回内容
					},
					error: function() {
						alert("加载失败，请重试！");
					}
				});
			});
		});
	</script>
</head>
<body>
	<nav>
		<ul>
			<li><a href="1.html" class="special">1.html</a></li>
			<li><a href="1.html">2.html</a></li>
		</ul>
	</nav>
	<div class="content-right" id="content"></div>
</body>
</html>

1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
hello word!
</body>
</html>

点击链接1，页面阻止了网站的跳转
在这里插入图片描述
点击链接2

左边导航栏右边内容

<!doctype html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <meta name = "viewport"
              content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
        <title>Test</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <style>
            /*兼容浏览器*/
            * {
                margin: 0;
                padding: 0;
            }

            .content {
                width: 100%;
                height: 100%;
            }

            .content-left {
                width: 20%;
                height: 100%;
                height: 600px;
                background-color: #6495ED;
                float: left;
            }

            .content-right {
                width: 80%;
                height: 100%;
                height: 600px;
                background-color: #00000;
                float: left;
            }

            .left-title {
                width: 100%;
                height: 50px;
            }

            .left-title > a {
                display: block;
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: white;
                /*去掉a下默认下划线*/
                text-decoration: none;
            }

            /*分割线*/
            .seg {
                height: 1px;
                width: 100%;
                background-color: #FF69B4;
            }

            .nav {
                /*上下5,左右0*/
                margin: 5px 0;
            }

            /*菜单项主标题*/
            .nav-title {
                height: 40px;
                width: 100%;
                color: white;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
                font-size: 10px;
            }
            /*菜单项主标题*/
            .nav-title2 > a{
                display: block;
                height: 40px;
                width: 100%;
                color: white;
                text-decoration: none;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
                font-size: 10px;
            }
             .nav-menu{
                line-height: 20px;
                display: block;
                height: 10%;
                width: 100%;
                color: white;
                text-decoration: none;
                text-align: center;
                line-height: 20px;
                cursor: pointer;
                font-size: 10px;
            }
            /*子标题内容区*/
            .nav-content {
                width: 100%;
                height: 100%;
                background-color: #00FFFF;
            }

            /*子标题的样式*/
            .nav-content > a {
                display: block;
                width: 100%;
                height: 30px;
                color: #CCCCCC;
                text-decoration: none;
                text-align: center;
                line-height: 30px;
                font-size: 10px;
            }

            /*子标题鼠标经过时的改变颜色*/
            .nav-content > a:hover {
                color: #00BFFF;
                background-color: #ADFF2F;
            }

            /*内容区*/
            .content-right{
                font-size: 10px;
                line-height: 10px;
                text-align: center;
            }
        </style>
        <script>
		$(document).ready(function() {
			// 当点击链接时
			$("a.special").click(function(event) {
				event.preventDefault(); // 阻止默认跳转行为
				var href = $(this).attr("href"); // 获取链接地址
				$.ajax({
					url: href, // 发送异步请求
					success: function(response) {
						$("#content").html(response); // 在页面中显示返回内容
					},
					error: function() {
						alert("加载失败，请重试！");
					}
				});
			});
		});
	</script>
    </head>
    <body>
        <div class = "content">
            <!--左侧导航栏-->
            <div class = "content-left">
                <div class = "left-title">
                    <div class = "nav-title">左边导航栏右边内容区域</div>
                </div>

                <!--水平线-->
                <div class = "seg"></div>

                <!--菜单栏导航-->
                <div class = "nav">
                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title">第一个标题</div>
                        <!--子标题-->
                        <div class = "nav-content">
                            <a href = "1.html" class="special">1</a>

                        </div>
                    </div>

                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title">第二个标题</div>
                        <!--子标题-->
                        <div class = "nav-content">
                            <a href = "2.html" class="special">1</a>


                        </div>
                    </div>


                </div>
                    <!--每一个菜单栏项-->
                    <div class = "nav-menu">
                        <!--主标题-->
                        <div class = "nav-title2"><a href = "1.html" class="special">新的话题</a></div>
                        <!--子标题-->
                </div>

                <!--水平线-->
                <div class = "seg"></div>
            </div>

            <!--右侧内容区-->
            <div class = "content-right" id = "content">
            </div>
        </div>
    </body>
</html>

附带了两个界面，这里就可以实现页面不跳转情况下，右边显示内容了
在这里插入图片描述

登陆界面代码请前往
我前面写的文章查看
https://blog.csdn.net/THREEFUCT/article/details/126175671?spm=1001.2014.3001.5501

南师大蒜阿熏呀

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
flask左边导航栏，右边内容，阻止页面跳转问题jquery引用

测试界面test.html1.html点击链接1，页面阻止了网站的跳转点击链接2左边导航栏右边内容附带了两个界面，这里就可以实现页面不跳转情况下，右边显示内容了登陆界面代码请前往我前面写的文章查看https://blog.csdn.net/THREEFUCT/article/details/126175671?spm=1001.2014.3001.5501
复制链接

扫一扫