0

我正在尝试在网站中使用 Jquery Tabs 并对其进行了一些样式设置...我已请朋友检查它在 ie 7 中的外观,但它变坏了...所有标签

  • 元素以无序列表的形式出现......

    以下是它们在所有当前浏览器中的外观和功能: 完整的标签

    这是他们在 ie 7 中的样子 损坏的标签

    另一个问题是非选定选项卡中包含的元素应保持隐藏,而选定选项卡的内容应显示在其下方...整个系统已损坏,即仅显示所有未选定选项卡的内容

    编码:

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

    和样式表:

    #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;
    }
    
  • 4

    1 回答 1

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

    我已经更新了代码,试试这个

    于 2013-02-22T06:57:50.807 回答