0

次の簡単なコードがあります。

<div id="albumTitle">
   <ul>
        <li id="albumTitle1" class="selected"><a  onClick="showAlbum('#albumTitle1','#album1')">Album One</a></li>
        <li id="albumTitle2"><a onClick="showAlbum('#albumTitle1','#album1')">Album Two</a></li>
        <li id="albumTitle3"><a onClick="showAlbum('#albumTitle1','#album1')">Album Three</a></li>
   </ul>
</div>

今ではアルバム自体

<div id="albums">

  <div id="album1">
    <ul>
        <li><img src="img/image1.png" /></li>
        <li><img src="img/image2.png" /></li>
        <li><img src="img/image3.png" /></li>
    </ul>
  </div>
  <div id="album2" class="inactive">
    <ul>
        <li><img src="img/image1.png" /></li>
        <li><img src="img/image2.png" /></li>
        <li><img src="img/image3.png" /></li>
    </ul>
  </div>
  <div id="album3" class="inactive">
    <ul>
        <li><img src="img/image1.png" /></li>
        <li><img src="img/image2.png" /></li>
        <li><img src="img/image3.png" /></li>
    </ul>
  </div>

</div>

だからここに私が欲しいものがあります...

簡単に言えば、アルバムをクリックすると、「選択された」クラスがそのアルバムのタイトルに移動し、以前に「選択された」アルバム クラスが削除されます。

同様に、ALBUM が選択されると、「非アクティブ」クラスが以前に選択されたアルバムに「追加」され、新しく選択されたアルバムから「削除」されます。

コードは次のとおりです。

<script language="javascript" type="text/javascript">

    function showAlbum(albTitle, albName) {
        var obj = new Array();

        for (var x = 1; x <= 3; x++) {
            obj.push("album" + x);
        }

        $.each(obj, function (key, value) {
            //alert( key + ": " + value );
            if ($("#" + value).hasClass("inactive")) {
                $("#" + value).removeClass("inactive");
                $("#" + albTitle).removeClass("selected");
            } else {
                $("#" + value).addClass("inactive");
                $("#" + albTitle).addClass("selected");
            }
        });
    }

</script>
4

2 に答える 2

0

HTML は変更していません。元の投稿と同じです。

HTML:

<div id="albumTitle">
   <ul>
        <li id="albumTitle1" class="selected"><a  onClick="showAlbum('#albumTitle1','#album1')">Album One</a></li>
        <li id="albumTitle2"><a onClick="showAlbum('#albumTitle2','#album2')">Album Two</a></li>
        <li id="albumTitle3"><a onClick="showAlbum('#albumTitle3','#album3')">Album Three</a></li>
   </ul>
</div>
<div id="albums">

  <div id="album1">
    <ul>
        <li><img src="img/image1.png" /></li>
        <li><img src="img/image2.png" /></li>
        <li><img src="img/image3.png" /></li>
    </ul>
  </div>
  <div id="album2" class="inactive">
    <ul>
        <li><img src="img/image1.png" /></li>
        <li><img src="img/image2.png" /></li>
        <li><img src="img/image3.png" /></li>
    </ul>
  </div>
  <div id="album3" class="inactive">
    <ul>
        <li><img src="img/image1.png" /></li>
        <li><img src="img/image2.png" /></li>
        <li><img src="img/image3.png" /></li>
    </ul>
  </div>

</div>

JavaScript:

function showAlbum(albTitle, albName) {
        $('#albumTitle>ul>li.selected').removeClass('selected');
        $(albTitle).addClass('selected');
        $('#albums>div').addClass('inactive');
        $(albName).removeClass('inactive');
}

CSS:

.selected
{
  background-color:blue;    
}
.inactive
{
  background-color:yellow;    
}

デモ: http://jsfiddle.net/uxZA7/

于 2013-09-16T14:25:43.697 に答える