0

レスポンシブウェブサイトを構築しています。ナビゲーションを修正しました。そして、私のコンテンツは変化しています。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%;

}
4

2 に答える 2

0

<li>クリックしたときに個々の要素の幅を変更したいということですか?

Jquery を使用している場合は、次の方法で実行できます。

$('.aside ul li').click(function() {
    $(this).css('width', 180);
});
于 2013-02-12T22:52:00.147 に答える
0

クリックイベントでjavascriptを使用してクラスを追加することでそれを行うことができます。

于 2013-02-12T22:47:35.813 に答える