JQuery вкладки не работают в т.е. 7
Я пытаюсь использовать вкладки Jquery на веб-сайте и немного их стилизовал... Я попросил друга проверить, как он выглядит, т.е. 7, и он выходит из строя... все вкладки
Вот как они должны выглядеть и работать во всех современных браузерах: 
И вот как они выглядят в т.е. 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;
}
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");
})
Я обновил код, попробуйте это