Как изменить видимость с помощью onclick

Question

Как изменить видимость с помощью onclick

0

Привет, я новичок в 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 работать, поэтому, если вы можете исправить это, было бы здорово. Спасибо за вашу помощь

user3105940 16 дек. 2013, в 05:44

Источник

0

Вы хотите, чтобы элемент был виден при нажатии мыши? или вы хотите переключить видимость
Arun P Johny 16 дек. 2013, в 03:49
0

Да, я хочу сделать элемент видимым, когда на него нажимают
user3105940 20 дек. 2013, в 03:31

Теги:

javascript

jquery

html

css

css3

6 ответов

Ещё вопросы

Вы хотите, чтобы элемент был виден при нажатии мыши? или вы хотите переключить видимость
Да, я хочу сделать элемент видимым, когда на него нажимают

synapze · Answer 1 · 2013-12-16T02-26-00.000Z

Вы можете сделать это с помощью чистого css3, злоупотребляя: not pseudo class. Например, вы можете запустить анимацию после того, как произошел 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/

bitoffdev · Answer 2 · 2013-12-16T01-39-00.000Z

Одним из способов изменения видимости 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>

Abinaya Selvaraju · Answer 3 · 2013-12-16T07-08-00.000Z

попробуй это.

:active is ur требуется свойство css

РАБОЧИЙ ОБРАЗЕЦ

Я просто изменил свойство видимости для моего удобства. U может изменить его на то, что вам нужно точно.

Marshall House · Answer 4 · 2013-12-16T02-26-00.000Z

Бросьте это (это бесполезно):

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

Добавь это:

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

JS:

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

Просто добавьте класс, который может быть рассмотрен в простом CSS. Таким образом, ваше приложение не будет связано никакими строгими законами.

Ramji Goyal · Answer 5 · 2013-12-16T01-50-00.000Z

Вы можете сделать что-то подобное

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

Felix · Answer 6 · 2013-12-16T00-56-00.000Z

Попробуй это:

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