Question

我正在构建自适应网站。我有固定导航。我的内容正在发生变化。我想更改HOME列表，例如，当我点击它时，宽度为180px。有人可以帮忙吗？

这是我的导航代码

HTML

<div class="aside">
<ul>
    <li><a class="po" href="index.html">HOME</a></li>
    <li><a class="fo" href="galerija.html">GALERY</a></li>
    <li><a class="ra" href="program.html">PROGRAM</a></li>
    <li><a class="ko" href="ulaznice.html">TICKETS</a></li>
<li><a class="ko" href="kontakt.html">CONTACT</a></li>
</ul>

CSS

.aside ul
{
float:left;
font-size:0.8em;
display:block;
margin-top:10%;
padding: 0px;
max-width:180px:
width:100%;
min-width:140px;

}


.aside li 
{
height:40px;    
list-style:none;
width:100%;
display:block;
text-align:center;
line-height:45px;
padding-top:2px;

}


.aside a
{
background-color:white;
display:block;
height:40px;
width:70%;  
text-align: center;
text-decoration:none;
font-size:1.375em;
font-weight:600;
font-weight:600;
color:#4ea3d9;
-moz-transition: all 600ms ease;
-webkit-transition:all 600ms ease;
-o-transition: all 600ms ease;

}

.aside a:hover
{
width:100%;

}

Answer 1

你可以通过在点击事件上添加一个带有javascript的类来实现。

Answer 2

您是否希望单个<li>元素在单击时更改其宽度？

如果你正在使用Jquery，你可以这样做：

$('.aside ul li').click(function() {
    $(this).css('width', 180);
});

如何在单击时更改无序列表宽度

2 个答案: