通过单击另一个更改html标记的样式_Html_Css

通过单击另一个更改html标记的样式

html css

通过单击另一个更改html标记的样式,html,css,Html,Css,我有下面的代码，parentAppliance是主左导航表的一部分，在设备上方悬停时，我看到一个子表包含运行状况。现在我想当我点击“健康”时，子表消失，有什么想法吗 CSS: HTML: 尝试将onmouseover事件添加到父设备，并添加一个额外的JavaScript方法来重置子显示状态 <html> <head> <style> .childAppliance { display:none; } .

我有下面的代码，parentAppliance是主左导航表的一部分，在设备上方悬停时，我看到一个子表包含运行状况。现在我想当我点击“健康”时，子表消失，有什么想法吗

CSS:

HTML:

尝试将onmouseover事件添加到父设备，并添加一个额外的JavaScript方法来重置子显示状态

<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>

使用：激活可将显示设置回无

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

CSS没有单击事件。看看jQuery或普通JavaScript。@isherwood CSS实际上可以通过radio选项卡生成点击事件。不是说这是最实用的方法，但它是可能的：}是的，但不是这个问题所需要的一般元素。我知道我可以使用下面的javascript代码：函数hideobj{var element=document.getElementByIdobj；element.style.display='none'；}并进行以下HTML代码修改：-1用于复制问题Hanks jim31415。我在执行你的建议的过程中走了一半，效果很好：非常感谢！但这种元素也会消失在mouseout上。

<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>

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