Question

如何只使用javascript显示一个元素ande隐藏其他元素？

当我点击id="x_1"时，我只想显示id="ele-1"元素并隐藏其他元素

当我点击id="x_2"时，我想只显示id="ele-2"元素并隐藏其他元素

当我点击id="x_3"时，我想只显示id="ele-3"元素并隐藏其他元素

当我点击id="x_4"时，我想只显示id="ele-4"元素并隐藏其他元素

当我点击id="x_5"时，我想只显示id="ele-5"元素并隐藏其他元素

当我点击id="x_6"时，我想只显示id="ele-6"元素并隐藏其他元素

我不知道该怎么办？谢谢

http://jsfiddle.net/a3MKG/63/

<script>
function showDiv(data) {  
      $("#ele-"+!data).hide();    
      $("#ele-"+data).toggle();    
}   
</script>

Answer 1

您好我已经创建了一个jsfiddle请看看。如果您需要任何澄清，请ping我。谢谢 jsFiddle Sample

.press {
  background: red;
  float: left;
  padding: 20px;
  margin-left: 20px;
}
.visibleClass {
  display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="x_1" class="press" onclick="showDiv('1')">1</div>
<div id="x_2" class="press" onclick="showDiv('2')">2</div>
<div id="x_3" class="press" onclick="showDiv('3')">3</div>
<div id="x_4" class="press" onclick="showDiv('4')">4</div>
<div id="x_5" class="press" onclick="showDiv('5')">5</div>
<div id="x_6" class="press" onclick="showDiv('6')">6</div>
<br>
<br>
<br>
<br>
<div id="ele-1" style="display: none;">show data 1</div>
<div id="ele-2" style="display: none;">show data 2</div>
<div id="ele-3" style="display: none;">show data 3</div>
<div id="ele-4" style="display: none;">show data 4</div>
<div id="ele-5" style="display: none;">show data 5</div>
<div id="ele-6" style="display: none;">show data 6</div>


<script>
  function showDiv(data) {
    $("#ele-" + data).addClass('visibleClass');
    hideElement(6, data);
  }

  function hideElement(total, active) {
    for (i = 1; i <= total; i++) {
      if (i != active)
        $("#ele-" + i).removeClass('visibleClass');
    }
  }
</script>

Answer 2

您可以创建一个CSS类

.active{
    display: inline;
}

并添加到您的新闻类

.press{
    display: none;
}

每个上课的班级＆＃34;按＆＃34;将被隐藏，除非它有类＆＃34;活跃＆＃34;。

当您点击按钮时，您只需添加＆＃34;有效＆＃34;选择div的类来显示它。

Jquery

中的一个简单示例

$('div.press').click(function {
    $('.press.active').removeClass('active');
    var divId = //get the id of the div
    $('#'+divId).addClass('active');
});

但我确定有很多方法可以做到这一点，我希望它有所帮助。

Answer 3

使用javascript：存储 id =“ele-1”，就像数组中唯一的 ele-1 一样。在每个 x_1 （如id）的onclick上调用相同的函数以及 ele-1 ，如文本作为争论。在脚本中，您已经在数组中存储了ID为 ele-1 的所有名称。因此，使用函数中的参数，创建一个for循环，直到数组的长度，并使用此代码设置隐藏所有divs的可见性：

for(var i=1;i<array.length;i++){
    if(("ele-"+i)==arguement)
        continue;    
    document.getElementById("ele-"+array[i]).style.visibility="hidden";
}

这将隐藏所有其他元素，除了争论（这是div的id是可见的，从x_1的onclick发送，就像div一样）。

如何只显示一个元素并使用javascript隐藏其他元素？

3 个答案: