Question

我正在尝试在一个网站中使用Jquery Tabs并对它们设置了一些...我已经让一位朋友检查它的外观，即7，它变坏了......所有标签

元素作为无序列表出现....

以下是他们在所有当前浏览器中的外观和行为： Non-broken tabs

这就是他们在7中的样子 Broken Tabs

另一个问题是，未选中的标签中包含的元素应保持隐藏状态，而所选标签的内容应显示在其下方...整个系统中断，即只显示所有未选中的内容标签以及

代码：

<div class = 'midContentContainer'>
                <div id = 'buttonAddBlog'>
                    <a href = '#tabs-3'></a>
                </div>
                <div id="tabs">
                  <ul>
                    <li><a id = 'tab1'href="#tabs-1">Questions</a></li>
                    <li><a id = 'tab2'href="#tabs-2">Blogs</a></li>
                    <li><a id = 'tab3'href="#tabs-3">Create Your Own <span style = 'color:#0499ff'> NEW! </span></a></li>
                  </ul>

                  <div id="tabs-1">
                    <p style = 'font-size: 14px; font-family: "Helvetica Neue",sans-serif; color: #444;'> Ask any academic question and our Quick GPA team and active community will respond in a timely manner. Whether it's tips on school, math equations, or even philosophical studies, we are there to make sure you get the answer you need. </p>

                    <br/>
                    <div class = 'createYourOwnText' style = 'background-color: #fefefe; padding: 10px; border: 1px dashed #1585b8;'>
                        <strong> Ask your own question by clicking the 'create your own' link above! </strong>
                        </div>
                    <h3 id = 'questionsHeader'> Questions </h3>


                   <?php
                            $allPostsArray = retrieveAllPosts();
                            displayAllPostsFrom($allPostsArray);
                        ?>
                        <div class = 'dialog'>
                        </div>
                  </div>
                  <div id="tabs-2">
                    <p style = 'font-size: 14px; font-family: "Helvetica Neue",sans-serif; color: #444;'> Read our wide variety of blogs, written by both the Quick GPA Team and our active community. These cover all spectrums of academics. Now, you can create your own blog to be posted on our site. </p>

                    <br/>
                    <div class = 'createYourOwnText' style = 'background-color: #fefefe; padding: 10px; border: 1px dashed #1585b8;'>
                        <strong> Create your own article by clicking the 'create your own' link above! </strong>
                        </div>
                    <h3 id = 'questionHeader'> Articles </h3>
                    <?php
                        $allPostsArray = retrieveAllArticles();
                        displayAllArticlesFrom($allPostsArray);
                    ?>

                  </div>
                  <div id="tabs-3">
                    <div id = 'tabs2'>
                        <ul style = 'text-transform: uppercase;'>
                            <li><a id = 'tab1'href="#tabs-4">Ask a Question</a></li>
                            <li><a id = 'tab2'href="#tabs-5">Write a Blog</a></li>
                          </ul>
                            <div id = 'tabs-4' style = 'height: 460px;'>
                            <form action = "insertBlog.php" id = 'questionInsertForm' method = 'post'>
                                    <span style = 'font-size: 15px; font-weight: bold; font-family: "Helvetica Neue";'>Question</span><br/><br/>
                                    <input placeholder = 'title of your question? be specific...'style = 'border: 1px solid #bbb; width: 250px;'type = 'text' name = 'subject' ><br/><br/>
                                    <span style = 'font-size: 15px;font-weight: bold; font-family: "Helvetica Neue";'>More Detail (Optional)</span><br/><br/>
                                    <textarea name = 'body' style = 'width: 85%; height: 120px;'></textarea>
                                    <br/><br/>

                                    <input type = 'text' style= 'width: 400px; font-size: 12px;'name = 'tags' placeholder = "what's your question category"><br/><br/>
                                    <input type = 'text' style = 'width: 400px;' id = 'email2'name = 'user' placeholder = 'Your email...'> 
                                    <span id = 'questionError' style = 'font-size: 12px; color: red;font-family: "Helvetica Neue";'>
                                        <br/>
                                        Your Email information is completely hidden to users and will be used only to notify you when you get a response.
                                        <br/>
                                    </span>
                                    <br/>
                                    <button id = 'questionButton' class = 'btn blue'> Create </button>
                                </form>
                            </div>
                            <div id = 'tabs-5' style = 'height: 460px;'>
                                <form action = "insertArticle.php" id = 'articleInsertForm' method = 'post'>
                                    <span style = 'font-size: 15px; font-weight: bold; font-family: "Helvetica Neue";'>Title</span><br/><br/>
                                    <input placeholder = 'Title of your article, be specific...'style = 'border: 1px solid #bbb; width: 250px;'type = 'text' name = 'subject' ><br/><br/>
                                    <span style = 'font-size: 15px;font-weight: bold; font-family: "Helvetica Neue";'>Post</span><br/><br/>
                                    <textarea name = 'body' style = 'width: 85%; height: 120px;'></textarea><br/><br/>

                                    <input type = 'text' style= 'width: 400px; font-size: 12px;'name = 'tags' placeholder = "what's your post category"><br/><br/>
                                    <input type = 'text' style= 'width: 400px; font-size: 12px;' id = 'email' name = 'user' placeholder = 'Your email...'> 
                                    <span id = 'emailError' style = 'font-size: 12px; color: red;font-family: "Helvetica Neue";'>
                                        <br/>
                                        Your Email information is completely hidden to users and will be used only to notify you when you get a response.
                                        <br/>
                                    </span> 
                                    <br/>
                                    <button id = 'submitArticle' class = 'btn blue'> Create </button>
                                </form>
                            </div>
                        </div>
                  </div>
                </div>

                <?php include_once('includes/activeSideBar.php'); ?>

            </div>

            <?php include_once('includes/footer.php'); ?>
        </div>
    </div>
    <?php require_once('includes/facebookShareFooter.php'); ?>
</div>

和STYLESHEETS：

#tabs{
    width: 68%;
    float: left;
    margin-top: 20px;
    background: transparent; 
    border: none; 
}
#tabs ul{
    list-style: none;
}
#tabs .ui-widget-header { 
    background: transparent; 
    border: none; 
    border-bottom: 1px solid #c0c0c0; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
} 
#tabs .ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-active { 
    background: transparent url(arrow2.png) no-repeat bottom center; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-default a { 
    color: #c0c0c0; 
    outline: none;
} 
#tabs .ui-tabs-nav .ui-state-active a { 
    color: #459e00; 
    outline: none;
}

Answer 1

如果它不能正常使用Jquery，

<ul>
    <li class="nav_li"><a id = 'tab1'href="#tabs-1">Questions</a></li>
    <li class="nav_li"><a id = 'tab2'href="#tabs-2">Blogs</a></li>
    <li class="nav_li"><a id = 'tab3'href="#tabs-3">Create Your/li>
</ul>

$(function(){
   $(".nav_li").css("float","left"); 
})

我已更新代码，请尝试此操作

jquery选项卡不工作ie 7

1 个答案: