2 ddword66 ddword66 于 2016.01.27 17:18 提问

jsp中显示与隐藏图标问题

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

6个回答

a1104258464
a1104258464   2016.01.27 17:27

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

u010342038
u010342038   2016.01.27 17:35

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

meng20166
meng20166   Rxr 2016.01.27 17:35

你要给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>

js

 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";
     }
 }
rui888
rui888   Ds   Rxr 2016.01.27 17:41

你的需求说错了吧。

 <!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>
showbo
showbo   Ds   Rxr 2016.01.27 17:45

你都隐藏了还怎么点击。。。你应该是点击一组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>
qq_19558705
qq_19558705   Ds   Rxr 2016.01.27 18:17

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

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!