js实现点击标题，内容在同一窗口显示（隐藏与显示）

最新推荐文章于 2022-08-18 17:15:02 发布

高中不复，大学纷飞

最新推荐文章于 2022-08-18 17:15:02 发布

阅读量1k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44760912/article/details/103041927

版权

js实现点击标题，内容在同一窗口显示（隐藏与显示）

整体代码如下：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>xiaoliuliu</title>
		<link rel="stylesheet" href="css/xiaoliu.css">
	</head>

	<body>

		<header class="head bg-orange">
			
			<nav class="center-width">
				<a href="#" class="nav-picture active">图片</a>
				<a href="#" class="nav-article">文章</a>
			</nav>
			
		</header>

		<div class="body center-width">

			<section class="image">

				姓名：<input type="text" name="" id="" value="" />

			</section>

			<section class="article">

				<p>我叫111,你知道了吗？</p>
				<span id="shuoming">
					显然，这个只是实现了点击时，内容在同一画面进行切换，原理就是隐藏与显示。而并没有实现点击同一个
				</span>
			</section>
			
		</div>

		<script src="js/jquery-2.1.4.min.js"></script>
		<script>
			$('.head .center-width a').click(function() {
				var this_ = $(this);
				if(!this_.hasClass('active')) {
					$('.head .center-width .active').removeClass('active');
					this_.addClass('active');
					if(this_.hasClass('nav-picture')) {
						$('.body .article').hide();
						$('.body .image').show();
					} else {
						$('.body .image').hide();
						$('.body .article').show();
					}
				}
			})
		</script>
	</body>

</html>

注意：由于js代码与html中个别id已相互对应，如要修改，对应的js代码也要修改，否则不会有效果，在这个标准框架内，可自行添加内容

css代码如下：


* {
padding: 0;
margin: 0;
}
body {
background-color: #f9eee6;
padding: 0;
margin: 0;
font-size: 15px;
min-width: 840px;
}
.center-width {
display: block;
width: 840px ;
margin: 0 auto;
min-width: 840px ;
}
@media (min-width: 1400px) {
.center-width {
width: 1200px;
}
}
.bg-orange{
background-color: #ffa366;
color: #fff;
    }
.head{
height: 54px ;
line-height: 54px;
    }
.body {
background-color: #fefefe; 
min-height: 500px;
    }
.footer {
line-height: 34px;
font-size: 13px;
text-align: center;
}

/*页眉部分*/
    .head > nav a {
        display: inline-block;
        height: 100%;
        padding: 0 10px;
        flex-shrink: 16px;
        color: #fefefe;
        text-decoration: none;
    }
    .head > nav a.active {
        background-color: #f9eee6;
        color: #666；
    }
    .head > nav a:hover {
        color: #444;
    }
    .head > nav a.active:hover {
        color: #ffa366;
    }

    /*图片模块*/
    img {
        width: 100%;
        height: auto;
    }
    
    /*文章模块*/
    .article {
        font-family: "cursive";
        display: none;
    }

    .article p {
        padding: 0 120px;
        letter-spacing: 1px;
        line-height: 24px;
        text-indent: 32px;
        margin-bottom: 16px;
    }

jquery-2.1.4.min.js资源下载：/*! jQuery v2.1.4 | © 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */
1.可以自己去jQuery官网下载该版本
2.资源已上传…

高中不复，大学纷飞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现点击标题，内容在同一窗口显示（隐藏与显示）

js实现点击标题，内容在同一窗口显示（隐藏与显示）整体代码如下：<!doctype html><html> <head> <meta charset="utf-8"> <title>xiaoliuliu</title> <link rel="stylesheet" href="css/xiaoli...
复制链接

扫一扫