|
這篇文章主要為大家詳細介紹了JS 展開/收起按鈕顯示隱藏文字示例，具有一定的參考價值，可以用來參考一下。 感興趣JS 展開/收起按鈕顯示隱藏文字示例的小伙伴，下面一起跟隨512筆記的小編羅X來看看吧。<br><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding:0;margin: 0;}
.pn{width:400px; margin: 200px auto 0; background-color: #ddd; text-align: center;padding:0 100px;}
.slide a{display: block;width: 100px;height: 30px;line-height:30px; text-align:center;margin:0 auto;background-color: #f00; text-decoration: none;color:#fff;}
</style>
</head>
<body>
<div class="pn">
<p>簡介</p>
<p>女娃</p>
<div class="hpn" id="mm" style="display:none;">
<p>特點：人長得很特很特點</p>
<p>愛好：看電影睡覺爬山</p>
</div>
</div>
<p class="slide"><a href="javascript:showdiv();" id="strhref" class="btn-show">展開</a></p>
<script type="text/javascript">
function showdiv(){
document.getElementById('mm').style.display = 'block';
document.getElementById('strhref').innerHTML="收起";
document.getElementById('strhref').href="javascript:hidediv()";
}
function hidediv(){
document.getElementById('mm').style.display = 'none';
document.getElementById('strhref').innerHTML="展開";
document.getElementById('strhref').href="javascript:showdiv()";
}
</script>
</body>
</html>
注：關于JS 展開/收起按鈕顯示隱藏文字示例的內容就先介紹到這里，更多相關文章的可以留意512筆記的其他信息。 關鍵詞：顯示文字
|
