jquery翻转插件显示和隐藏内容

Question

实际上我不是程序员，我是设计师......比回复此案的人多......

我在翻转插件上应用show和hide内容时遇到了困难......

var init = function(){

            $("#flipTop").click(function(e){


                $("#flipbox").flip({
                    dir: "top",
                    endColor: "white",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html(TOP);
                        $("#flipbox").css();  
                    }
                });
            });

            $("#flipRight").click(function(e){
                $("#flipbox").flip({
                    dir: "right",
                    endColor: "yellow",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("RIGHT");
                        $("#flipbox").css({
                            color: "red",
                            background: "yellow"
                        });  
                    }
                });
            });
            $("#flipLeft").click(function(e){
                $("#flipbox").flip({
                    dir: "left",
                    endColor: "blue",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("LEFT");
                        $("#flipbox").css({
                            color: "white",
                            background: "blue"

                        });  
                    }
                });
            });
            $("#flipBottom").click(function(e){
                $("#flipbox").flip({
                    dir: "bottom",
                    endColor: "red",
                    duration:777,
                    onEnd: function(){
                        $("#flipbox").html("BOTTOM");
                        $("#flipbox").css({
                            color: "yellow",
                            background: "red"
                        });  
                    }
                });
            });



        }

        $(document).ready(init);

=============================================== ================================================== == 我认为上面的javascript太冗余了......为了更改显示和隐藏所选内容，必须简化它

，这是我试图制作的HTML .......

<ul id="navigation" >  
        <li class="selected">
            <a href="#" id="Top"    rel="white"  rev="777">  TOP   </a></li>  
        <li><a href="#" id="Right"  rel="yellow" rev="777"> RIGHT  </a></li> 
        <li><a href="#" id="Left"   rel="blue"   rev="777">  LEFT  </a></li>  
        <li><a href="#" id="Bottom" rel="red"    rev="777"> BOTTOM </a></li>  
    </ul>






<div id="container">    
<div id="flipbox" class="top">
TOP
</div>
<div id="flipbox"class="right">
RIGHT
</div>
<div id="flipbox"class="left">
LEFT
</div>
<div id="flipbox"class="bottom">
BOTTOM
</div>
</div>

=============================================== ===========================================

然后我尝试为java脚本命令编译这个，但我没有工作.... :(

$('document').ready(function(){  
    $('#flipbox').flip();  
    $('#navigation li a').each(function(){  
        $(this).click(function(){  
            $('#navigation li').each(function(){  
                $(this).removeClass('selected');  
            });  
            $(this).parent().addClass('selected');  

            var flipid=$(this).attr('id').substr(4);  
            $('#flipbox').flip({   
                dir: $this.attr("id"),
        endColor: $this.attr("rel"),
        duration:$this.attr("rev"),
                onEnd: function(){
             }, flipid, 1);

            return false;  
        });  
    });  
});  

我想问的是如何让这些作品在翻转效果后显示和隐藏内容，同时点击标签导航......非常感谢那些回应这个问题mmm

Answer 1

查看此页面的源代码http://lab.smashup.it/flip/它可能有助于您理解，因为我从未尝试过翻转插件但我愿意帮助您。!!