html如何点击左边的导航，右边弹出对应的内容？

Question

有没有大神啊，新手菜鸟求指点；左边导航是用ul li 写的，右边图片是一个DIV； 左边的ul和右边的图片DIV是兄弟关系，现在问的就是 怎么实现点击左边的li 右边内容变换成能对应的内容；也就是每点击一个li标签导航，右边内容就会随之变换；大神最好能把代码发我；邮箱[email protected]。什么方法都行

Answer 1

这个是点击之后触发事件，是要用到js代码的，我这大概给一个框架，css代码你自己设置一下：

html代码如下：

<div class="main">    

<div class="left">    

<ul>    

<li onclick="choose(1);" class="select">玄界</li>    

<li onclick="choose(2);">阶位</li>    

<li onclick="choose(3);">坐骑</li>    

<li onclick="choose(4);">佣兵</li>    

<li onclick="choose(5);">骑士</li>                        

</ul>    

</div>    

<div class="right">    

<div id="1"><img src="01.png"/></div>    

<div id="2" class="ycdiv"><img src="02.png"/></div>    

<div id="3" class="ycdiv"><img src="03.png"/></div>    

<div id="4" class="ycdiv"><img src="04.png"/></div>    

<div id="5" class="ycdiv"><img src="05.png"/></div>    

</div>    

</div>    

JS代码如下：

<script type="text/javascript">     

for(var i=2;i<=5;i++){    

document.getElementById(i).style.display="none"; //让多余的div隐藏    

}    

function choose(obj){    

//隐藏所有的div    

for(var i=1;i<=5;i++){    

document.getElementById(i).style.display="none"; //让div隐藏    

}    

document.getElementById(obj).style.display="block";    //给li加样式    

var lis = document.getElementsByTagName("li"); //下标从0开始    

for(var i=0;i<lis.length;i++){    

lis[i].className = "";    

}    

lis[obj-1].className = "select";    

}    

</script>

其他的你自己去琢磨下，原理和代码已给到。

追问

大神 搞定了  大问题搞定了，出了点小问题    只不过就是 点击li标签 之后  标签就变形了，

就这种点击后内容都正常的   就是标签变形了    应该是JS里面隐藏多余的DIV把这边的也影响到了，怎么修改大神



