1

次の例でjqueryを使用してcssプロパティを変更するにはどうすればよいですか？私がする必要があるのは、ユーザーがそのアイテムをクリックしたときに「btn1」クラスの背景位置を変更することです。「クリック」機能で「btn1」クラスをターゲットにできません...ちなみに専門家ではありません

<div class="menu">
    <ul>
        <li><a href="#" onclick="loadListaClientes(1);loadClientWeb(1);loadSlideWeb(1);return false;" class="btn1"></a>
        <li><a href="#" onclick="loadListaClientes(2);loadClientGr(1);return false;" class="btn2"></a></li>
        <li><a href="#" onclick="loadListaClientes(3);loadClientAds(1);return false;" class="btn3"></a></li>
        <li><a href="#" onclick="loadListaClientes(4);loadClientPh(1);return false;" class="btn4"></a></li>
        <li><a href="#" onclick="loadListaClientes(5);loadClientMo(1);return false;" class="btn5"></a></li>
        <li><a href="#" onclick="loadListaClientes(6);loadClientApp(1);return false;" class="btn6"></a></li>
       <li><a href="#" onclick="loadListaClientes(7);loadClientId(1);return false;" class="btn7"></a></li>
    </ul>
</div>

ps：マークアップを更新します

4

3 に答える 3

5

このようにしてみてください

$("a.btn1").on("click", function() {
    $(this).css('background-position', 'new_values_here');
});

また、リスト<ul>を使用している場合は、そのアイテムを使用する方が適切<li>です。それ以外の場合は、意味的に意味がありません。

于 2012-12-26T15:44:37.103 に答える
0

私はあなたのコードにいくつかの変更を加えました、そして今それはこのように見えます

この作業を行うには、プロジェクトにjQueryをロードする必要があります。これは良いスタートだと思います

于 2012-12-26T16:39:44.653 に答える
0

HTMLを簡素化します。

<ul class="menu">
    <li><a href="#" class="btn1"></a></li>
    <li><a href="#" class="btn2"></a></li>
    <li><a href="#" class="btn3"></a></li>
    <li><a href="#" class="btn4"></a></li>
    <li><a href="#" class="btn5"></a></li>
    <li><a href="#" class="btn6"></a></li>
    <li><a href="#" class="btn7"></a></li>
</ul>

委任を使用してワンクリックハンドラーを追加します。

$(document).ready(function() { // wait for DOM load
    // handle click on menu
    $(".menu").on("click", "a", function(ev) { // delegate to menu div
        ev.preventDefault(); // similar to "return false"
        var button = $(this); // the "a" that was clicked
        var itemIndex = $(button.parent(), ".menu").index() + 1; // calculate element number
        loadListaClientes(itemIndex); // first function can be called using index
        // handle buttons case by case
        switch (itemIndex) {
        case 1:
            // ".btn1" handled here
            button.css('background-position', newPosition); // change background CSS
            loadClientWeb(1);
            loadSlideWeb(1)
            break;
        case 2:
            // ".btn2", etc.
            loadClientGr(1);
            break;
        case 3:
            loadClientAds(1);
            break;
        case 4:
            loadClientPh(1);
            break;
        case 5:
            loadClientMo(1);
            break;
        case 6:
            loadClientApp(1);
            break;
        case 7:
            loadClientId(1);
            break;
        default:
            // default menu action or throw error here
        }
    });
});
于 2012-12-26T17:22:23.427 に答える