jsp中显示与隐藏图标问题

现在我有4个span标签，每个span标签里面都有相应的图标,如何用js来控制显示隐藏哦？开始span的display为none,当我点击其中一个的时候其他span标签隐藏，点击的span显示，如何做到?

每个span 设置一个ID 当点击其中一个的时候其他span标签隐藏

做一个onclick事件吧，点击的时候修改display的状态

你要给4个span标签设置同一个事件,但是要传不同的参数，例如：

html：

 <span id="span1" onclick="showThis(1);" style=“display：block；”>图标</span>
 <span id="span2" onclick="showThis(2);" style="display:none;">图标</span>
 <span id="span3" onclick="showThis(3);" style="display:none;">图标</span>
 <span id="span3" onclick="showThis(4);" style="display:none;">图标</span>

 function showThis(value){
   if(value=="1"){
     document.getElementById("span1").style.display="block";
      document.getElementById("span2").style.display="none";
                document.getElementById("span3").style.display="none";
            document.getElementById("span3").style.display="none";
     }else if(value=="2"){
        document.getElementById("span1").style.display="none";
      document.getElementById("span2").style.display="block";
                document.getElementById("span3").style.display="none";
            document.getElementById("span3").style.display="none";
     }else if(value=="3"){
        document.getElementById("span1").style.display="none";
      document.getElementById("span2").style.display="none";
                document.getElementById("span3").style.display="block";
            document.getElementById("span3").style.display="none";
     }else if(value=="4"){
        document.getElementById("span1").style.display="none";
      document.getElementById("span2").style.display="none";
                document.getElementById("span3").style.display="none";
            document.getElementById("span3").style.display="block";
     }
 }

你的需求说错了吧。

 <!DOCTYPE html>
<html>
<head>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").click(function(){
    $('span').show();
$(this).hide();
  });
});
</script>
</head>
<body>
<span>a<img src='http://avatar.csdn.net/E/7/0/2_91program.jpg'/>a</span>
<span style='display:none'>b<img src='http://noavatar.csdn.net/7/D/9/2_ddword66.jpg'/>b</span>
<span style='display:none'>c<img src='http://avatar.csdn.net/E/D/E/2_u010342038.jpg'/>c</span>
<span style='display:none'>d<img src='http://avatar.csdn.net/8/A/6/2_oyljerry.jpg'/>d</span>
</body>
</html>

你都隐藏了还怎么点击。。。你应该是点击一组span，控制另外一组span的显示隐藏

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<div>
    <span onclick="spanClick(this);">图标1</span>
    <span onclick="spanClick(this);">图标2</span>
    <span onclick="spanClick(this);">图标3</span>
    <span onclick="spanClick(this);">图标4</span>
</div>
<div id="content">
    <div>div1</div>
    <div style="display:none">div2</div>
    <div style="display:none">div3</div>
    <div style="display:none">div4</div>
</div>
<script>
    function spanClick(o) { $('#content>div').hide().eq($(o).index()).show() }
</script>

这是两个的，参考一下吧：http://blog.csdn.net/qq_19558705/article/details/50364662