Изменение стиля тега HTML, нажав на другой

Question

Изменение стиля тега HTML, нажав на другой

0

У меня есть следующий код: parentAppliance является частью основной левой навигационной таблицы и при зависании над "Appliance". Я вижу подтаблицу, содержащую "здоровье". Теперь я хочу, чтобы подтаблица исчезла, когда я нажимаю на здоровье, какие-то мысли?

CSS:

.childAppliance
    {
        display:none;
    }
.parentAppliance:hover .childAppliance
    {
        display: block;
        top: 50px;
        left: 130px;
    }

HTML:

<li id="Appliance" itemid="Appliance" class="parentAppliance" role="presentation">
    <a href="#/appliance_status.home" hiddentitle="Appliance" id="ui-id-83" class="ui-corner-all" tabindex="-1" role="menuitem" aria-haspopup="true" title="" data-original-title="">
        <span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><ins class="ui-navigation-static-menu-icon ui-navigation-static-menu-icon-backup"></ins>
        <span class="ui-navigation-static-menu-text" style="display: inline;">Appliance</span>
    </a>
    <ul id="ApplianceSubTable" class="ui-menu ui-widget ui-widget-content ui-corner-all childAppliance" role="menu" aria-hidden="true" aria-expanded="false" aria-labelledby="ui-id-83">
        <li itemid="Health" class="ui-menu-item" role="presentation">
            <a href="#/appliance_status.home" hiddentitle="Health" id="ui-id-33" class="ui-corner-all ui-state-focus applianceFocus" tabindex="-1" role="menuitem" title="">
                <span class="ui-navigation-static-menu-text">Health</span>
            </a>
        </li>
    </ul>
</li>

adelphia 17 дек. 2013, в 19:22

Источник

6

У CSS нет событий кликов. Посмотрите на jQuery или простой JavaScript.
isherwood 17 дек. 2013, в 18:21
0

@isherwood CSS на самом деле может иметь события щелчка через вкладки радио. jsfiddle.net/Josh_Powell/UbF9a (не говоря о том, что это самый практичный способ, но это возможно:})
Josh Powell 17 дек. 2013, в 18:40
0

Правда, но не по общим элементам, как хотелось бы для этого вопроса.
isherwood 17 дек. 2013, в 18:52
0

Я знаю, что мог бы использовать приведенный ниже код JavaScript: function hide (obj) {var element = document.getElementById (obj); element.style.display = 'none'; } И внесите следующую модификацию HTML-кода: <a href = "# / appliance_status.home" hiddentitle = "Health" id = "ui-id-33" class = "ui-corner-all ui-state-focus applianceFocus" tabindex = "- 1" role = "menuitem" title = "" onclick = "hide ('ApplianceSubTable');> Получается то, что я хочу, но при повторном наведении курсора на« Устройство »таблица не отображается.
adelphia 17 дек. 2013, в 19:47
1

-1 за дублирующие вопросы
War10ck 17 дек. 2013, в 20:28
0

На самом деле: active - это, по сути, событие щелчка ... Смотрите мой ответ
Andrew 17 дек. 2013, в 23:01

Показать ещё 4 комментария

Теги:

html

css

2 ответа

Ещё вопросы

У CSS нет событий кликов. Посмотрите на jQuery или простой JavaScript.
@isherwood CSS на самом деле может иметь события щелчка через вкладки радио. jsfiddle.net/Josh_Powell/UbF9a (не говоря о том, что это самый практичный способ, но это возможно:})
Правда, но не по общим элементам, как хотелось бы для этого вопроса.
Я знаю, что мог бы использовать приведенный ниже код JavaScript: function hide (obj) {var element = document.getElementById (obj); element.style.display = 'none'; } И внесите следующую модификацию HTML-кода: <a href = "# / appliance_status.home" hiddentitle = "Health" id = "ui-id-33" class = "ui-corner-all ui-state-focus applianceFocus" tabindex = "- 1" role = "menuitem" title = "" onclick = "hide ('ApplianceSubTable');> Получается то, что я хочу, но при повторном наведении курсора на« Устройство »таблица не отображается.
На самом деле: active - это, по сути, событие щелчка ... Смотрите мой ответ

Andrew · Answer 1 · 2013-12-17T20-15-00.000Z

Использовать: активно, чтобы установить отображение на нет.

.ui-navigation-static-menu-text:active{
    display:none;
}

http://jsfiddle.net/vXU2t/

Но элемент также исчезает при наведении мыши.

jim31415 · Answer 2 · 2013-12-17T18-40-00.000Z

Попробуйте добавить событие onmouseover к родительскому устройству и дополнительный метод JavaScript для сброса состояния отображения дочернего onmouseover.

<html>
<head>
    <style>
     .childAppliance
    {
        display:none;
    }
    .parentAppliance:hover .childAppliance
    {
        display: block;
        top: 50px;
        left: 130px;
    }
    </style>
    <script type="text/javascript">
        function toggle(obj) { 
            var element = document.getElementById(obj);

            if(element.style.display == 'none')
                element.style.display = 'block';
            else
                element.style.display = 'none';
        }

        function show(obj) {
            var element = document.getElementById(obj);
            element.style.display = '';
        }
    </script>
</head>
<body>


<li id="Appliance" itemid="Appliance" class="parentAppliance" role="presentation">
    <a href="#/appliance_status.home" hiddentitle="Health" id="A1" 
        class="ui-corner-all ui-state-focus applianceFocus" tabindex="-1" role="menuitem" title="" 
        onclick="toggle('ApplianceSubTable');" onmouseover="show('ApplianceSubTable');">

    <!--<a href="#/appliance_status.home" hiddentitle="Appliance" id="ui-id-83" class="ui-corner-all" tabindex="-1" role="menuitem" aria-haspopup="true" title="" data-original-title="">-->
        <span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><ins class="ui-navigation-static-menu-icon ui-navigation-static-menu-icon-backup"></ins>
        <span class="ui-navigation-static-menu-text" style="display: inline;">Appliance</span>
    </a>
    <ul id="ApplianceSubTable" class="ui-menu ui-widget ui-widget-content ui-corner-all childAppliance" role="menu" aria-hidden="true" aria-expanded="false" aria-labelledby="ui-id-83">
        <li itemid="Health" class="ui-menu-item" role="presentation">
            <a href="#/appliance_status.home" hiddentitle="Health" id="ui-id-33" class="ui-corner-all ui-state-focus applianceFocus" tabindex="-1" role="menuitem" title="">
                <span class="ui-navigation-static-menu-text">Health</span>
            </a>
        </li>
    </ul>
</li>
</body>
</html>

Спасибо jim31415. Я был на полпути к реализации вашего предложения, и это работает :) Большое спасибо!