html里,点击左侧菜单,右侧出现文本或者图片,用js怎么写

Posted 2023-03-02

点击左侧的菜单一，右侧出现文本
点击左侧的菜单二，右侧出现图片

<script>
function $(v)return document.getElementById(v);
var x=0;
function c(y)
$("a"+x).style.display = "none";
$("a"+y).style.display = "";
x=y


</script>
<a href="javascript:;" onclick="c(0);">菜单一</a>
<a href="javascript:;" onclick="c(1);">菜单二</a>
<div id="a0">这里是文字</div>
<div id="a1" style="display:none;">这里是图片，自己写上<img src="图片地址"></div>

左侧右侧布局我没给你写，只写了图片、文字切换功能。

参考技术A 最简单的 ： 把样式都写出来 如下
导航栏链接：
<ul id="list_r">
<li><a href="#fr_con_1" id="first">FIRST TAB</a></li>
<li><a href="#fr_con_2" id="second">SECOND TAB</a></li>
<li><a href="#fr_con_3" id="third">THIRD TAB</a></li>
</ul>
右边内容：
<section id="fr_con_1" style="display: block;">
<h5>SPORT</h5>
<h1>These are the best supercars you'll see at Goodwood</h1>

<p>Aenean lacinia bibendum nulla sed consectetur</p>
<p>Aenean eu leo quam. Pellentesque ornare sem </p>
<p>lacinia quam venenatis vestibulum.</p>

</section>
<section id="fr_con_2" style="display: none;">
<h5>SPORT</h5>
<h1>These are the best supercars you'll see at Goodwood</h1>

<p>Aenean lacinia bibendum nulla sed consectetur</p>
<p>Aenean eu leo quam. Pellentesque ornare sem </p>
<p>lacinia quam venenatis vestibulum.</p>

</section>
<section id="fr_con_3" style="display: none;">
<h5>SPORT</h5>
<h1>These are the best supercars you'll see at Goodwood</h1>

<p>Aenean lacinia bibendum nulla sed consectetur</p>
<p>Aenean eu leo quam. Pellentesque ornare sem </p>
<p>lacinia quam venenatis vestibulum.</p>

</section>
<script type="text/javascript">
var first = document.getElementById('first');
var second = document.getElementById('second');
var third = document.getElementById('third');
var fr_con_1 = document.getElementById('fr_con_1');
var fr_con_2 = document.getElementById('fr_con_2');
var fr_con_3 = document.getElementById('fr_con_3');
first.onclick= function()
fr_con_1.style.display="block";
fr_con_2.style.display="none";
fr_con_3.style.display="none";

second.onclick= function()
fr_con_1.style.display="none";
fr_con_2.style.display="block";
fr_con_3.style.display="none";

third.onclick= function()
fr_con_1.style.display="none";
fr_con_2.style.display="none";
fr_con_3.style.display="block";

</script>