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

测试界面test.html

DOCTYPE html>
<html>
<head>
	<title>Index Pagetitle>
	
	<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>
	
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">script>
    
    <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.htmla>li>
			<li><a href="1.html">2.htmla>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>Titletitle>
head>
<body>
hello word!
body>
html>

点击链接1,页面阻止了网站的跳转
flask左边导航栏,右边内容,阻止页面跳转问题jquery引用_第1张图片
点击链接2
flask左边导航栏,右边内容,阻止页面跳转问题jquery引用_第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>Testtitle>
    <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">1a>

                        div>
                    div>

                    
                    <div class = "nav-menu">
                        
                        <div class = "nav-title">第二个标题div>
                        
                        <div class = "nav-content">
                            <a href = "2.html" class="special">1a>


                        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>

附带了两个界面,这里就可以实现页面不跳转情况下,右边显示内容了
flask左边导航栏,右边内容,阻止页面跳转问题jquery引用_第3张图片
flask左边导航栏,右边内容,阻止页面跳转问题jquery引用_第4张图片
登陆界面代码请前往
我前面写的文章查看
https://blog.csdn.net/THREEFUCT/article/details/126175671?spm=1001.2014.3001.5501

你可能感兴趣的:(flask,jquery,javascript)