Блог

Главная - Вопросы по программированию - Jquery заменяет содержимое по щелчку

Jquery заменяет содержимое по щелчку

#javascript #jquery

#javascript #jquery

Вопрос:

Я хочу заменить содержимое div #textoGrande на внешний файл.

Я намерен использовать каждое меню li для вызова включенных файлов div, избегая перезагрузки страницы. Мой javascript include пуст… Я не знаю, с чего начать…

Вот структура html:

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link href="css/style.css" media="screen" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type='text/javascript' src='include/javascript.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Opera</title>
</head>

<body>
    <div class="main">
        <div id="header">

            <h1 id="logo">
                <a href="#">Linux Logo</a>
            </h1>

            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Support</a></li>
            </ul>

            <div id="player"></div>

        </div>
    <div id="imagen"></div>
    <h2 id="textoGrande"><p>Opera ahora<br /> mas acojedor...</p>
    </h2><h3 id="textoPequeno"><p>En su nueva versión, Opera apuesta por un nuevo diseño y pestañas visuales, un motor más veloz que incrementa su velocidad en un 40% frente a su anterior versión y un mejor soporte de estándares.</p>

    </h3></div>


</body></html>

Ответ №1:

 $("li a").live("click", function(){
       $("#textoGrande").load($(this).attr('href') ' body');    
       return false;
});

Комментарии:

1. Спасибо, но это только загрузка самого себя # … Как вы заставляете это работать для определенного html?

2. Если я это сделаю, например, <li><a href="test.html">Home</a></li> загружается вся страница, javascript, похоже, не оказывает никакого эффекта.

3. Все еще не работает, что я делаю не так? Пожалуйста, проверьте живой образец: gabrielmeono.com/working

4. @Gabriel: Попробуйте использовать новый jQuery, не уверен, что это сработает, но попробуйте изменить 1.5.1 на 1.7

5. Я думал, что это так, но не совсем, это удаляет старый div, но загружает новый контент…

Ответ №2:

 $(document).ready(function() {
  $("li a").click(function() {
    $("#textoGrande").load($(this).attr('href'));
  });
});

Комментарии:

1. Он содержит ошибку sintaxis в строке 3. И ничего не делает, страница загружается полностью.