Как показать только один элемент и скрыть другой элемент с помощью javascript?

Question

Как показать только один элемент и скрыть другой элемент с помощью javascript?

Когда я нажимаю на 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

Вы можете создать CSS класс

.active{ 
    display: inline; 
} 

и добавить в свой пресс-класс

.press{ 
    display: none; 
} 

Каждый DIV с классом "нажмите" будут скрыты если у него нет класса «активный».

Когда вы нажимаете кнопку, вам просто нужно добавить «активный» класс к выбранному div, чтобы показать его.

Простой пример в Jquery

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

Но я уверен, что есть много способов сделать это, я надеюсь, что это помогло.

Answer 2

использование JavaScript: магазина ID = "Эль-1" как только Эль-1 в массиве идентификаторов. вызывать одну и ту же функцию on onclick каждого x_1 как id вместе с ele-1 как текст в качестве аргумента. В скрипте у вас уже есть все имена, хранящиеся с идентификатором, как ele-1 в массиве. так с arguement в функции, создать для цикла Шифрование до длины массива и установить все DIVS видимости, скрытый с помощью этого кода:

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

это будет устанавливать все остальные элементы скрыты за исключением arguement (который является идентификатором из div, чтобы быть видимым, отправлено из onclick x_1, как divs).

Answer 3

Привет, я создал jsfiddle, пожалуйста, посмотрите. Если вам нужно какое-либо разъяснение, пожалуйста, пинги меня.Благодаря 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>