Question

您好我是Javascript的新手，因为css没有onclick我需要一些帮助。

这是我的HTML：

<div id="dropnav">
    <ul>
        <li><a>Navigation</a> 
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="Paintings.html">Paintings</a>
                </li>
                <li><a href="Contact.html">Contact</a>
                </li>
                <li><a href="Bio.html">Bio</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

这是我的css：

#dropnav {
position:relative;
z-index:100;
top:-60px;
left:18%;
background-size:18%;

}
#dropnav ul {
padding:0px;
margin:0px;

}

#dropnav ul li {
display:inline;
float:left;
width:68.5%;
list-style-type:none;
border-style:solid;
border-width:1px;
font-family:arial;
height:50px;

}

#dropnav ul li a {
background-color:#808080;
color:#FFFFFF;
text-decoration:none;
line-height:50px;
display:block;
padding-left:36.2%;
width:63.8%;
}

#dropnav ul li a:hover {
background-color:#666666;
}

#dropnav ul li ul li {
width:99.8%;

}
#dropnav ul li ul li a{
background-color:#666666;
}
#dropnav ul li ul li a:hover {
background-color:#333333;

}

#dropnav ul li ul {
visibility:hidden;
}

#dropnav ul li:onclick ul {
visibility:visible;
}

现在我需要：onclick工作，所以如果你能修复它会很棒。谢谢你的帮助

Answer 1

更改可见性onclick的一种方法是在html标记中添加一个事件属性：

onclick="this.style.visibility='hidden';"

例如，这是您的导航栏，链接消失：

<div id="dropnav">
    <ul>
        <li><a>Navigation</a> 
            <ul>
                <li><a href="index.html" onclick="this.style.visibility='hidden';">Home</a>
                </li>
                <li><a href="Paintings.html" onclick="this.style.visibility='hidden';">Paintings</a>
                </li>
                <li><a href="Contact.html" onclick="this.style.visibility='hidden';">Contact</a>
                </li>
                <li><a href="Bio.html" onclick="this.style.visibility='hidden';">Bio</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Answer 2

您可以通过滥用：not pseudo类来使用纯css3执行此操作。例如，您可以在发生onclick后触发动画。

 <a href="#" id="btn" onclick="return false">Click</a>

<style>
    #btn:not(:active) {
        /* now keep red background for 1s */
        transition: background-color 1000ms step-end;
    }

    #btn:active {
        background: red;
    }
</style>

试一试 - http://jsfiddle.net/WG4Sf/

这是一篇关于CSS点击事件的好文章，如果你应该使用它们。 http://www.vanseodesign.com/css/click-events/

Answer 3

试试这个：

$('#dropnav ul li').click(function() {
    $(this).parent().css('visibility','visible');
})

Answer 4

放弃这个（没用）：

#dropnav ul li:onclick ul {
    visibility:visible;
}

添加此内容：

#dropnav ul li.open ul {
    visibility:visible;
}

JS：

$('#dropnav ul li').click(function(){
    $(this).addClass('open');
});

只需添加一个类，可以在纯CSS中进一步处理。这样您的申请就不受任何严格法律的约束。

Answer 5

你可以做这样的事情

<html>
<head>
<script type="text/javascript">
function change()
{
document.getElementById("d").style.visibility="hidden";
}
</script>
</head>
<body>
<a href="#" onclick="change();">Click Me</a><br/>
<div id="d">This is just example</div>
</body>
</html>

Answer 6

试试这个。

:active是您需要的css属性

WORKING SAMPLE

我刚刚更改了可见性属性以方便我。你可以把它改成你需要的东西。

如何使用onclick更改可见性

6 个答案: