js控制span显示隐藏

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js控制span显示隐藏相关的知识,希望对你有一定的参考价值。

默认显示第一个价格,点击下面的时间进行切换。数据都是有后台传输过来的。数量不确定

    //自定义方法hideElement()

    function hideElement(id)        

    document.getElementById(id).style.display = "none";
      

          

    //自定义方法showElement()
         

    function showElement(id)
       

    document.getElementById(id).style.display = ""; 

//这是不用自定义函数直接设置是否隐藏
       

function isChang1(values)
          

if (values == "yxsh")
       

document.getElementById("yxsh").style.display = "";
               document.getElementById("key").style.display = "none";
       

else
     

document.getElementById("yxsh").style.display = "none";
               document.getElementById("key").style.display = "";
     


     

资料拓展:

javascript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在html(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

参考技术A

<hml>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function ()
$('#btn').on('click',function()
if ($(this).text()=="隐藏")
$(this).text("显示");

else
$(this).text("隐藏");

$('#test').toggle();
)
)
</script>
</head>
<body>
<span id="test">test</span>
<button id="btn">隐藏</button>
</body>
</html>
参考技术B 用js修改span的style=display:none
关键例句:
html: <span id="spanid"></span>
js: document.getElementById(spanid).style.display="none";追问

能给个小小的demo吗?这个大概的思路我知道的,就是不太会写js,不知道如何来修改span的style值

追答

按照你的截图,做的效果,说明一下:假如你有10个价格,修改hidespan(10,1),hidespan(10,2)...hidespan(10,10)即可

<script type="text/javascript">
function hidespan(count,id)
  for(var i=1; i<count+1; i++)
    if(i != id)
      document.getElementById("spanid"+i).style.display="none";
    else
 document.getElementById("spanid"+i).style.display="block";
    
  

</script>
<span id="spanid1">50000</span>
<span id="spanid2">30000</span>
<a onclick="hidespan(2,1)" style="cursor:pointer;">3个月</a>  
<a onclick="hidespan(2,2)" style="cursor:pointer;">2个月</a>


当然你也可以将

document.getElementById("spanid"+i).style.display="none";

修改为:

document.getElementById("spanid"+i).className=hideClass;

粗糙了一些,见谅。

本回答被提问者采纳
参考技术C js 先获取那几个元素,然后根据你自己的逻辑,再操作那几个元素的style属性。obj.display =“none”什么的

jQuery点击当前元素显示其他元素隐藏

参考技术A 给你举个例子吧
<a>点击</a>
<span>隐藏的内容</span>
<span>隐藏的内容</span>
<span>隐藏的内容</span>
<span>隐藏的内容</span>

$(function()
$("a").click(function()
$("span").hide();
)

)追问

我需要的点当前span标签,其他隐藏其他span标签,(如果加ID的话都是一样的),该怎么实现

本回答被提问者采纳
参考技术B 很简单,用下面的js代码试一试

$("#").click(function()
document.getElementById('').style.display='none';
)

以上是关于js控制span显示隐藏的主要内容,如果未能解决你的问题,请参考以下文章

js里面怎么将内容隐藏内容隐藏

有内容就显示 没内容就隐藏的JS判断代码

js中怎么控制一个标签的显示与隐藏

求一个JS控制DIV显示和隐藏

JS控制多个div显示与隐藏的问题。

JS 点击显示 点击任意处隐藏事件