Jquery选项卡无法正常运行

Question

我正在一个网站上工作，我想在我的标题div中使用标签，以便它们与网站的标识对齐。但是，当我这样做时，选项卡似乎无法正常运行。填充信息时，它会立即显示所有选项卡。如果没有信息，它会在错误的位置显示按钮。

这里是标签的设置：

$(document).ready(function() //Script for Tabs
        {

            $(".tab_content").hide(); //Hide all content
            $("ul.tabs li:first").addClass("active").show(); //Activate first tab
            $(".tab_content:first").show(); //Show first tab conten

            $("ul.tabs li").click(function() 
            {
                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content
                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
            });
        });

以下是标签的HTML：

<div id="header">
    <h1>Test Site </h1>
    <ul class="tabs">
        <li><a href="#hide">Hide + Show</a></li>
        <li><a href="#event">Events</a></li>
        <li><a href="#ani">Animation</a></li>
        <li><a href="#acc">Accordians</a></li>
        <li><a href="#sel">Class Selectors</a></li>
    </ul>
    <div class="tab_container">
        <div id="hide" class="tab_content"  >
            <div id="luffy" Class = "m" >
                image 1
            </div>
            <div id="Zoro"Class = "m" >
                image 2
            </div>
            <div id="Nami"Class = "f" >
                image 3
                </div>
                <div id="Ussopp"Class = "m" >
                image 4
                </div>
                <div id="Sanji"Class = "m" >
                    image 5
                </div>
                <div id="Chopper"Class = "m">
                    image 6
                </div>
                <div id="robin"Class = "f" >
                    image 7
                </div>
                <div id="Franky"Class = "m" >
                    image 8
                </div>
                <div id="Brook"Class = "m">
                image 9
                </div>
                <div id="Sunny"Class = "s" >

                    Image 10  
                </div>

            <div id="button">
            <form>
                <input type="button" id="show" value="Show All"> 
                <input type="button" id="hide1" value="Hide All"> 
                <input type="button" id="male" value="Show Male Members"> 
                <input type="button" id="female" value="Show Female Members"> 
            </form>
            </div>
        </div>
        <div id="event" class="tab_content">
        <input type="button" id="add" value="Add image">
        <input type="button" id="remove" value="Remove All Images">
        <div id = "roger">

        </div>
        </div>
        <div id="ani" class="tab_content">
            <div id = "fading">
                <img src = 'straw.jpg'id = "hat"> 
            </div>
            <input type="button" id="fade" value="Fade Image">
            <input type="button" id="new" value=" Image">
            <input type="button" id="reset" value="Reset Image">
        </div>
        <div id="acc" class="tab_content">
            <div class = "faction"id = "navy">
                <p class="group">group 1</p>
                <div class="Facts">
                facts 

                </div>
            </div>
            <div class = "faction">
                <p class="group">group 2</p>
                <div class="Facts" >
                    facts
                </div>
            </div>
            <div class = "faction">
                <p class="group">group 3</p>
                <div class="Facts">
                    facts
                </div>
            </div>
            <div class = "faction"> 
                <p class="group">group 4</p>
                <div class="Facts">
                    facts 
                </div>
            </div>

        </div>
        <div id="sel" class="tab_content">
            <td>
                <input type="button" id="bold" value="Bold"> 
                <input type="button" id="ita" value="Italic">           

                <input type="button" id="under" value="Underline"> 
                <input type="button" id="gone" value="Remove">
            </td>

            <p id= "line1"> paragraph </p>
        </div>
    </div>
</div>

我的标签在他们自己的页面中由他们自己工作，所以很多东西都与他们发生了干扰。我不确定它的CSS是否正在进行

有一些CSS处理选项卡

ul.tabs{margin: 0;padding: 0;float: left;list-style: none;height: 32px;border-bottom: 1px solid #999;border-left: 1px solid #999;width: 655;}
        ul.tabs li{float: left;margin: 0;padding: 0;height: 31px;line-height: 31px;border: 1px solid #999;border-left: none;margin-bottom: -1px;overflow: hidden; background: #e0e0e0;}
        ul.tabs li a{text-decoration: none;color: #000;display: block;font-size: 1.2em; padding: 0 20px;border: 1px solid #fff;outline: none;}
        ul.tabs li a:hover {background: #ccc;}
        html ul.tabs li.active, html ul.tabs li.active a:hover{background: #fff;}
        .tab_container{border-top: none;overflow: hidden;clear: both;float: left;width: 642px;  background: #CCFF66;}