JS实现div的显示和隐藏侧边栏局部伪刷新的实现

最新推荐文章于 2022-11-19 15:21:29 发布

追僧逐月

最新推荐文章于 2022-11-19 15:21:29 发布

阅读量1.4k

点赞数 2

分类专栏： HTML+JS 文章标签： html js div隐藏于显示侧边栏实现

本文链接：https://blog.csdn.net/junling_xhu/article/details/80330613

版权

HTML+JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果描述：点击a标签1，触发事件open(obj)，显示div内容1，点击a标签2，隐藏div内容1,并显示div内容2……

js代码：

<script language="javascript">
		function opens(obj) {
			for (var i = 1; i <= 13; i++) {
				if (i === obj) {
					document.getElementById("con" + i).style.display = "block";
				} else
				document.getElementById("con" + i).style.display = "none";
			}
		}
</script>

<a href="#" οnclick="opens(1)"><span>标签1</span></a>
<a href="#" οnclick="opens(2)"><span>标签2</span></a>
<a href="#" οnclick="opens(3)"><span>标签3</span></a>

<div id="con1" style="display:none;">
    <p>div内容1</p>
</div>
<div id="con2" style="display:none;">
    <p>div内容2</p>
</div>
<div id="con3" style="display:none;">
    <p>div内容3</p>
</div>