jquery - jQuery クリックして CSS を変更

Question

簡単な質問がありますが、これを達成する方法が正確にはわかりません。私が知っているのは、click()関数を使用する必要があるということだけです。

基本的に、 id の div があり#box1ます。overflow:autoテーブルの長さ (長いテーブルは #box1 内) が div の幅を超える場合に垂直スクロールバーが表示されるように、CSS スタイルを適用しました#box1。

ここで、div の下にリンクを追加したいと思いました。リンクは次のことを行う必要があります。

クリックすると、div の CSS を to に追加#box1しoverflow:autoますoverflow:visible
同時に、上記の CSS を変更している間、リンクは新しいリンクを表示するように変更され (古いリンクは消えます)、overflow:autoクリックすると CSS が元に戻ります。

score 2 · Accepted Answer

メソッドを使用できますcss。

$('#myButton').click(function(event) {
    event.preventDefault();
    $('#box1').css('overflow', function(i, o) {
        return o == 'auto' ? 'visible' : 'auto';
    })
});

また、2つの異なるボタンを表示/非表示にする代わりに、次のtext方法を使用できます。

$('#myButton').click(function(event) {
    // ...  
    $(this).text(function(i, text){
       return text == 'show' ? 'hide' : 'show';
    })
});

http://jsfiddle.net/u6Nc8/

score 0 · Accepted Answer

フィドル： http： //jsfiddle.net/wbjSX/

$('#theLink').click(function() {
    if (turnToVisible) {
        $('#box1').css('overflow', 'visible');
        turnToVisible = false;
        $('#theLink').text('foobar');
    }
    else {
        $('#box1').css('overflow', 'auto');
        turnToVisible = true;
        $('#theLink').text('foobarbaz');
    }
});

そのような何かがあなたを始めるはずです。

基本的に、divをどのようにするかを変数に格納しますturnToVisible。この関数を使用しtextてリンクのテキストを変更したり、この関数を使用してcssCSSを変更したりできます。

score 0 · Accepted Answer

HTML:

<div id="#box1"></div>
<a href="#" id="#toggle">Toggle</a>

JS:

(function($){
    $(document).ready(function(){
        $("#toggle").click(function(e){
            e.preventDefault();
            if($("#box1").css("overflow") === "auto"){
                $("#box1").css("overflow", "visible");
            }else{
                $("#box1").css("overflow", "auto");
            }
        });
    });
}(window.jQuery));

基本的に、リンクがで別のページをロードしないようにする必要がありますe.preventDefault()。次に、ボックスにがある場合はoverflow: autoに設定しoverflow: visible、その逆も同様です。

score 0 · Accepted Answer

さて、テキストをオンにする必要があります：

<a id="myDivLink" href="javascript:void(0);">Disable scrolling</a>
<script type="text/javascript">
$(document).ready(function(){
  $("#myDivLink").click(function(){
    var anchor = $(this);
    if(anchor.html()==="Disable scrolling") {
      $("#myDiv").css("overflow","visible");
      anchor.html("Enable scrolling");
    } else {
      $("#myDiv").css("overflow","auto");
      anchor.html("Disable scrolling");
    }
  });
});
</script>

どのようだ？

jquery - jQuery クリックして CSS を変更

4 に答える 4

Related

Reference