Member 11052432 Ответов: 2

Скрыть или Показать панель с помощью javascript или jquery

Всем Привет,

У меня есть 3 кнопки ссылок и 3 тега разделения на странице.

Я должен показывать один div за раз.

Я имею в виду, что когда я нажимаю на 1-ю ссылку, то должен отображаться только 1-й div, а остальные 2 div-тега будут скрыты.

Когда я нажму на 2-ю ссылку, то появится 2-й div, а остальные должны быть скрыты.

Ниже приведена моя функция Javascript :-

function ShowOrHidePanel(div_id)
{
    $("#" + div_id.id).toggle();   
}

<a id="lnk_skills" onclick="ShowOrHidePanel(div_1); return false;" href="javascript:ShowOrHidePanel(div_1);"></a>

<a id="lnk_tech" onclick="ShowOrHidePanel(div_2); return false;" href="javascript:ShowOrHidePanel(div_2);"></a>

<a id="lnk_user" onclick="ShowOrHidePanel(div_3); return false;" href="javascript:ShowOrHidePanel(div_3);"></a>

<div id = "div_1"></div>
<div id = "div_2"></div>
<div id = "div_3"></div>


Что я уже пробовал:

Я попробовал с вышеуказанной функцией, передав div id. Но он скрывает 1 div и 2 divs все еще показывают.

2 Ответов

Рейтинг:
2

Karthik_Mahalingam

пробовать

<html>
<head>
    <style>
        #div_1, #div_2, #div_3 {
            display: none;
        }
    </style>
    <script>
        function ShowOrHidePanel(div_id) {
            var divs = ['div_1', 'div_2', 'div_3'];
            for (var i = 0; i < divs.length; i++) {
               document.getElementById( divs[i]).style.display = 'none';
            }
            document.getElementById(div_id).style.display = 'block';
        } 
    </script>

</head>
<body>
    <a id="lnk_skills" href="javascript:ShowOrHidePanel('div_1');">1</a>
    <a id="lnk_tech" href="javascript:ShowOrHidePanel('div_2');">2</a>
    <a id="lnk_user" href="javascript:ShowOrHidePanel('div_3');">3</a>
    <div id="div_1"> div1</div>
    <div id="div_2">div2</div>
    <div id="div_3">div3</div>
</body>
</html>


Демонстрация:Плунжер[^]

Рейтинг:
0

F-ES Sitecore

Вы только переключаете div для ссылки, которая была нажата, то, что вам нужно сделать, это не только показать нужный div, но и скрыть другие. Есть много способов сделать это, но один из них-отметить дивы, которые вы хотите быть частью переключения, чтобы вы могли настроить их на скрытие.

<script type="text/javascript">
    function ShowOrHidePanel(div_id)
    {
        $("[data-type='toggleDiv']").hide();
        $("#" + div_id.id).show();   
    }
</script>

<div id = "div_1" data-type="toggleDiv">Div 1</div>
<div id = "div_2" data-type="toggleDiv">Div 2</div>
<div id = "div_3" data-type="toggleDiv">Div 3</div>