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

最简单的 ： 把样式都写出来 如下
导航栏链接：
<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>