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

客官°小女子只卖身不卖艺 2023-06-12 12:27 1阅读 0赞

## 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.资源已上传…