Он работал уже сегодня...: S, но теперь, всякий раз, когда я нажимаю ссылку на вкладке, она открывается на совершенно новой странице, независимо от того, встроено ли содержимое вкладки в текущую страницу или ссылается на другую.
Вот мой код, и спасибо заранее!
<link rel="stylesheet" href="/style.css" media="screen,projection" type="text/css" />
<script src="/jquery.min.js" type="text/javascript"></script>
<script src="/jquery-ui.min.js" type="text/javascript"></script>
<!-- <script src="/jquery.min.js" type="text/javascript"></script>
<script src="/jquery-ui.min.js" type="text/javascript"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
<!----Javascript edited in below----->
<script type="text/javascript">
$('#payday').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
</script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="headercon">
</div><!--headercon-->
<div class="clear"></div>
</div><!-- header -->
<div id="tabs">
<div id="navigation">
<ul>
<li class="selected"><a href="#nav1"><span>nav1</span></a></li>
<li><a href="form2.php"><span>nav2</span></a></li>
<li><a href="form3.php"><span>nav3</span></a></li>
</ul>
<div class="clear"></div>
</div><!-- navigation -->
<div id="info">
<div class="top"></div>
<div id="payday" class="middle">
<h3>Get a quick quote NOW! <a href="form2.php">google</a></h3>
<div class="information">
<form action="ajax.php" id="submit" method="post">
<p class="enter"><span>Email address:</span><br><input id="email" class="email" type="text" name="email" value="Enter your email" input onclick="this.value='';" /></p>
<p class="date"><span>Date of birth:</span><br><input id="dd" class="day" type="text" name="dd" value="DD" input onclick="this.value='';"/><input id="mm" class="month" type="text" name="mm" value="MM" input onclick="this.value='';"/><input id="yyyy" class="year" type="text" name="yyyy" value="YYYY" input onclick="this.value='';"/></p>
<p class="submit"><input class="button" type="submit" value="" /></p>
</form>
<div class="clear"></div>
</div><!--information-->
<div class="success" style="display: none;">added.</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div><!--middle-->
<div class="clear"></div>
</div><!-- navigation -->
В коде, указанном в вашей ссылке, вам не хватает #
в день выплаты жалованья:
<script type="text/javascript">
$('#payday').tabs({ // <<< see here
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
</script>
Тем не менее, я не испытываю проблем с входящими вкладками или ссылкой на ссылку. Я использую FF4.
Ваш подход ошибочен, используя .tabs()
для загрузки содержимого, подобного этому. Просто используйте .load()
или .get()
.
Пример:
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#single a').click(function(e){
$('#target').load(this.href);
return false;
});
});
</script>
</head>
<body>
<div id="single">
<a href="files/test1.php">Test 1</a>
<a href="files/test2.php">Test 2</a>
<a href="files/test3.php">Test 3</a>
</div>
<div id="target"></div>
</body>
</html>
Следующее, что вам нужно сделать, это обработать ссылки в загруженном контенте. Например:
$(document).ready(function(){
setLink('single');
});
function setLink(id){
$('#'+id+' a').click(function(e){
$('#target').load(
this.href,
function(){
setLink('target');
}
);
return false;
});
}
См. http://jfcoder.com/test/load.php.
РЕДАКТИРОВАТЬ 2
Чтобы загрузить первую ссылку A в списке onDOMReady (вместо onLoad):
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setLink('single');
$('#target').load($('#single a:first').attr('href'));
});
function setLink(id){
$('#'+id+' a').click(function(e){
$('#target').load(
this.href,
function(){
setLink('target');
}
);
return false;
});
}
</script>
</head>
<body>
<div id="single">
<a href="files/test1.php">Test 1</a>
<a href="files/test2.php">Test 2</a>
<a href="files/test3.php">Test 3</a>
</div>
<div id="target"></div>
</body>
</html>
Вы закрываете div #navigation
, но вы не закрываете div #tabs
? Или я не прав?