HTML兩個標題的切換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#li{/*border:2px solid red;*/width: 800px;height: 600px;margin: 20px auto;position: relative;}
#l1,#l3{border-top-left-radius: 10px;border-top-right-radius: 10px;width: 100px;height: 40px;background: #666;position: absolute;top:20px;padding-top:7px;border: 1px solid black;border-bottom: 0px;text-align: center;}
#l3{left: 105px;}
#l2,#l4{width: 800px;height: 500px;background: #999;position: absolute;top: 55px;border: 1px solid black;border-top-right-radius: 10px;padding-top:50px;padding-left:50px;font-size: 20px;font-family: monospace;color: rgb(255, 0, 221);}
#mj1:checked~#li #l1{z-index: 3;top: 10px;background: #999;}
#mj1:checked~#li #l2{z-index: 2;background: #999;}
#mj2:checked~#li #l3{z-index: 3;top: 10px;background: #999;}
#mj2:checked~#li #l4{z-index: 2;background: #999;}
</style>
</head>
<body>
<input type="radio" name="ee" id="mj1" checked="true" style="display: none">
<input type="radio" name="ee" id="mj2" style="display: none">
<div id="li">
<div id="l1"><label for="mj1">標題一</label></div>
<div id="l2">三尺長劍斬不斷，相思情纏。</div>
<div id="l3"><label for="mj2">標題二</label></div>
<div id="l4">你許我一世情長，我與你一生相伴。</div>
</div>
</body>
</html>