UNIRRY

WEBデザインとホロスコープと宇宙のブログ

クリックしたらlistタグのアクティブが移動していくjs

jquerylist

いっぱいリストが並んでいて、クリックしたらクリックしたliタグにアクティブが移動してってくれるような仕掛けをjQueryでやったので記載します。カレンダー的なもので使用したのですが、タブメニューとかでも使用できそうです。

js

//リストクリックで表示切替
$('ul.date li a').click(function(e){

    //とりあえず今の段階でaタグにclassでselectedがついてるものを削除
    $('ul.date li a').removeClass("selected");

    //今押したlistのaタグ(=this)にselectedを追加
    $(this).addClass("selected");
    return false;

});

html ul部分

<ul class="date">
  <li><a class="selected">1</a></li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

css

ul.date li {
float: left;
width: 54px;
height: 38px;
margin: 1px;
line-height: 38px;
font-size: 17px;
text-align: center;
font-weight: bold;
color: #ccb8b1;
font-family: "Arial";
}
ul.date li a {
width: 54px;
height: 38px;
background: #ffffff;
text-decoration: underline;
display:block;
color: #5c2514;
}
ul.date li a.selected,
ul.date li a.selected:hover {
color: #ffffff;
background: #0099cc;
}
ul.date li a:hover {
background: #ffd98c;
}

これを基本にして、今押したlistのaタグ(=this)にselectedを追加したところで、その他の処理を追加していけば(listタグのIDと同じDIVを表示させるなど)、タブページ切替にも使えそうです。


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3