主要实现
- 点击门派按钮，显示对应图片
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>门派介绍</title>
<link rel="stylesheet" type="text/css" href="clxmp.css">
</head>
<body>
<div id="left">
<button id="hs" onclick="show_hs()">华山</button> <!-- 点击事件 -->
<button id="wd" onclick="show_wd()">武当</button>
<button id="wd" onclick="show_ym()">云梦</button>
<button id="wd" onclick="show_sl()">少林</button>
<button id="wd" onclick="show_ax()">暗香</button>
<button id="wd" onclick="show_ch()">沧海</button>
</div>
<div id="picture">
<img id="HS" src="https://clx.res.netease.com/pc/gw/20170921175633/img/hsimg_91cca8f.png">
<img id="WD" hidden src="https://clx.res.netease.com/pc/gw/20170921175633/img/wdimg1_676f01d.png">
<img id="YM" hidden src="https://clx.res.netease.com/pc/gw/20170921175633/img/ymimg_eae01b8.png">
<img id="SL" hidden src="https://clx.res.netease.com/pc/gw/20170921175633/img/slimg_fb4b7fc.png">
<img id="AX" hidden src="https://clx.res.netease.com/pc/gw/20170921175633/img/aximg_8728096.png">
<img id="CH" hidden src="https://clx.res.netease.com/pc/gw/20170921175633/img/chimg_d29980b.png">
</div>
<script src="clxmp.js"></script>
</body>
</html>
css
#left {
position: fixed;
left: 0;
190px;
margin-top: 200px;
background-image: url(https://wx2.sinaimg.cn/mw690/007C4HYVgy1g125ptqialj303505i3yb.jpg);
background-repeat: no-repeat;
background-size: 90% 100%;
padding-left: 20px;
}
button {
background-color: white;
border: none; /*清除按钮边框*/
color: black;
text-align: center;
text-decoration: none;
font-size: 25px;
margin-left: 35px;
margin-top: 10px;
}
button:hover {
border: solid;
border-color: red;
border-radius: 12px;
border- 2px;
}
#picture {
margin-left: 250px;
margin-top: 20px;
}
js
var p_hs = document.getElementById("HS");
var p_wd = document.getElementById("WD");
var p_ym = document.getElementById("YM");
var p_sl = document.getElementById("SL");
var p_ax = document.getElementById("AX");
var p_ch = document.getElementById("CH");
function show_hs(){ //通过hidden属性控制图片显示隐藏
p_hs.hidden=false;
p_wd.hidden=true;
p_ym.hidden=true;
p_sl.hidden=true;
p_ax.hidden=true;
p_ch.hidden=true;
}
function show_wd(){
p_hs.hidden=true;
p_wd.hidden=false;
p_ym.hidden=true;
p_sl.hidden=true;
p_ax.hidden=true;
p_ch.hidden=true;
}
function show_ym(){
p_hs.hidden=true;
p_wd.hidden=true;
p_ym.hidden=false;
p_sl.hidden=true;
p_ax.hidden=true;
p_ch.hidden=true;
}
function show_sl(){
p_hs.hidden=true;
p_wd.hidden=true;
p_ym.hidden=true;
p_sl.hidden=false;
p_ax.hidden=true;
p_ch.hidden=true;
}
function show_ax(){
p_hs.hidden=true;
p_wd.hidden=true;
p_ym.hidden=true;
p_sl.hidden=true;
p_ax.hidden=false;
p_ch.hidden=true;
}
function show_ch(){
p_hs.hidden=true;
p_wd.hidden=true;
p_ym.hidden=true;
p_sl.hidden=true;
p_ax.hidden=true;
p_ch.hidden=false;
}
效果
