1

下部に 2 つのボタンがあるページを作成しようとしています。これらの各ボタンをクリックすると、さまざまなコンテンツが表示されます。例えば：

<div id="page1">...some content...</div>
<div id="page2">...some content...</div>

私のCSS：

#page1 { display: block;}
#page2 { display: none;}

そしてボタンは画像です：

<div id="button1"><img src="images/button1.png"/></div>
<div id="button2"><img src="images/button2.png"/></div>

ボタンを機能させるためにjavascriptを使用しています。#blockボタンをクリックすると移動するオブジェクトです。

<script language="javascript">
    $(document).ready(function () {
        $("#button1").click(function () {
            $("#block").animate({
                left: "10px"
            });
            $("#page1").attr("display", "block");
            $("#page2").attr("display", "none");
        });
        $("#button2").click(function () {
            $("#block").animate({
                left: "100px"
            });
            $("#page1").attr("display", "none");
            $("#page2").attr("display", "block");
        });
    });
</script>

したがって、#button1がクリック
#page1されると: に変更されdisplay:block;
#page2ます に変更されますdisplay:none;- 非表示がクリックされると: に変更されます- 非表示

に変更され ます#button2
#page1display:none;
#page2display:block;
page2

4

2 に答える 2

3

display属性ではなく、style属性/オブジェクトのプロパティです。ただし、jQuery には独自の show、hide、および toggle メソッドがあるため、次のように簡単に使用できます。

<script language="javascript">
$(document).ready(function()
{
      $("#button1").click(function(){
           $("#block").animate({left:"10px"});
           $("#page1, #page2").toggle();
      });
      $("#button2").click(function(){
           $("#block").animate({left:"100px"});
           $("#page1, #page2").toggle(); 
      }); 
});
</script>
于 2013-10-22T23:06:02.227 に答える
1

page と呼ばれる css クラスと、page-invisible と呼ばれる別のクラスが必要です。その後、あなたはただやります

$('#page1').addClass("page-invisible");
$('#page2').removeClass("page-invisible");

クラス page-invisible は単に {display:none} であるか、または {opacity:.3; のようなものです。z-index:0} などを使用して、他のものの「後ろ」に配置します（絶対位置などを設定して、divを互いに重ねる必要があります。

于 2013-10-22T23:07:13.980 に答える