Проблема с загрузкой контента на вкладке jQuery UI

-2

Он работал уже сегодня...: 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 -->
  • 0
    Нам нужно больше информации здесь, пожалуйста. Как выглядит ваш JavaScript?
  • 0
    Можете ли вы проверить свою историю контроля версий и посмотреть, что вы изменили?
Показать ещё 11 комментариев
Теги:
tabs

2 ответа

0
Лучший ответ

В коде, указанном в вашей ссылке, вам не хватает # в день выплаты жалованья:

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

См. http://jfcoder.com/test/load.php.

  • 0
    Ах, приятно заметить это. Я просто изменил его, хотя он все еще не работает :( И да, вкладки в целом работают нормально, но мне нужна ссылка на вкладке дня выплаты жалованья, чтобы открыть, не покидая страницу, потому что тогда я смогу сделать Форма подачи работы. Есть идеи? Приветствия загружают за помощь! :)
  • 0
    @eoJ - см. мое редактирование.
Показать ещё 4 комментария
0

Вы закрываете div #navigation, но вы не закрываете div #tabs? Или я не прав?

  • 0
    Ах, извините, это не было включено. Я закрыл его, но </ div> чуть ниже последнего. Спасибо хоть :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню