Jquery plugins jquery flip插件显示和隐藏内容

事实上，我不是程序员，我是设计师……比那些回答这个问题的人多得多

我很难在flip插件上应用显示和隐藏内容。。。。。 =================================================================================================== 我认为上面的javascript太冗余了…必须简化它才能更改所选的显示和隐藏内容

这是我试图制作的HTML。。。。。。。

---

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

查看此页面的源代码，它可能会帮助您理解，因为我从未尝试过翻转插件，我愿意帮助您

非常感谢阿桑…我观察到了它，并询问了《flip pluggin lucca manno》的作者…但我仍然无法找到答案…它只是改变了那里的颜色、方向和标题…有没有其他建议给我…但非常感谢你的帮助…你真的很好。。

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);

<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>

$('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;  
        });  
    });  
});