0

スクリプト ：

$("#listchart li").mouseover(function()
{
        if($(this).hasClass('one'))
    {
            $('#piechart').addClass('piechart-one').removeClass(className);
        }

        if($(this).hasClass('two'))
    {
            $('#piechart').addClass('piechart-two').removeClass(className);
        }
        if($(this).hasClass('three'))
    {
            $('#piechart').addClass('piechart-three').removeClass(className);
        }

        if($(this).hasClass('four'))
    {
            $('#piechart').addClass('piechart-four').removeClass(className);
        }
});

申し訳ありませんが、コードは非常に初心者の手作業です。jQuery で次の「li」に移動して特定の CSS クラスを呼び出す方法がわかりません。これを行う適切な方法を教えていただければ、本当に本当に感謝しています。

HTML :

<div id="piechart" class="piechart-one">

<div id="listchart">
<ul>
<li class="one"><a href="">SubTitle-1</a></li>
<li class="two"><a href="">SubTitle-2</a></li>
<li class="three"><a href="">SubTitle-3</a></li>
<li class="four"><a href="">SubTitle-4</a></li>

</ul>
</div>

</div>

したがって、ページが最初に開かれたときに呼び出されるデフォルトのクラスは「piechart-one」です

4

2 に答える 2

1

(私があなたの質問をよく理解していれば: )

ワーキングデモ

使用したコード:

$('#listchart li').hover(function(){

    var takeClass = $(this).attr('class');
    $('#piechart').attr('class', 'piechart-'+takeClass );

},function(){
    $('#piechart').attr('class', 'piechart-one' );
});

カラーliチェンジあり

デモ2

コード：

$('#listchart li').hover(function(){

    var takeClass = $(this).attr('class');
    $('#piechart').attr('class', 'piechart-'+takeClass );
    $(this).toggleClass('active');

},function(){
    $('#piechart').attr('class', 'piechart-one' );
    $(this).toggleClass('active');
});

CSS クラス.activeを追加し、jQuery でクラスを切り替えるだけです。デモを見てください。

しかし、私はそれをもう少し派手にします：

デモ3

于 2011-07-18T17:54:03.530 に答える
0 
$("#listchart li").mouseover(function(){
    var newclass = $(this).attr('class');
    $('#piechart').attr('class', 'piechart-' + newclass);
});
于 2011-07-18T18:01:27.827 に答える