Проблема с функцией Показать / Скрыть в jQuery. Перейти к началу документа - PullRequest
Новая
       9

Проблема с функцией Показать / Скрыть в jQuery. Перейти к началу документа

3 голосов
/ 17 октября 2011

У меня есть 2 основных ссылки Показать / Скрыть на моем сайте, которые прекрасно работают.

Вот мой HTML: 

<code><!DOCTYPE html>
<html lang="en">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script type="text/javascript" src="http://codylindley.com/blogstuff/js/jquery/jquery-base.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("input.buttonAsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
    $("a.codeButtonA").click(function(){$("pre.codeA").toggle()});

    $("input.buttonBsize").click(function(){ alert($("div.contentToChange").find("p").size()); });
    $("a.codeButtonB").click(function(){$("pre.codeB").toggle()});

});
</script>

<style type="text/css">
pre {
background: white;
overflow: auto;
display:none;
}
</style>

</head>

<body>

    <a href="#" class="codeButtonA">Show / Hide</a>
    <pre class="codeA">
    test message 1
Показать / Скрыть 
    test message 2

Однако, когда я нажимаю 2-ую ссылку внизу страницы, она делает откройте тег <pre>, но затем перейдите к началу страницы.Можно ли как-то помешать этому перейти на верх страницы, когда я нажму на нее?

Я бы предпочел, чтобы он просто показывал прямоугольник и никогда не перепрыгивал наверх.

Большое спасибо за любую помощь с этим.

Ответы [ 6 ]

9 голосов
/ 17 октября 2011

Или удалите href="#" из тегов <A>

3 голосов
/ 17 октября 2011

Как я только что узнал из моего вопроса , где у меня была более или менее та же проблема, return false; - это простое решение. Это работает, но также может помешать запуску другого кода. Объяснение можно найти здесь в этом замечательном учебнике .

Скорее всего, вы хотите использовать что-то вроде 

$("a").click(function(event) {
    // your custom code
    event.preventDefault();
});

Он в основном останавливает / запрещает браузеру выполнять действие по умолчанию, которое ссылается на себя при использовании # в качестве href. Возвращение false также останавливает работу следующих скриптов, если они находятся в том же обработчике. Но учебник объясняет это лучше:)

В вашем случае это будет 

$("a.codeButtonB").click(function(event){
    $("pre.codeB").toggle();
    event.preventDefault();
});

Вероятно, это лучшее решение, если вы хотите использовать ссылки. Использование кнопок было бы другим решением, но это ограничивает вас в некоторых отношениях. Кроме того, вы могли бы (читай: должны) сохранить a и дать ему реальную ссылку на контент, который вы хотите отобразить, таким образом, он будет работать, даже если на клиенте отключен JavaScript.

3 голосов
/ 17 октября 2011 
$("input.buttonAsize").click(function(e){
    e.preventDefault();
    alert($("div.contentToChange").find("p").size());
});

$("a.codeButtonA").click(function(e){
    e.preventDefault();
    $("pre.codeA").toggle();
});

$("input.buttonBsize").click(function(e){
    e.preventDefault();
    alert($("div.contentToChange").find("p").size());
});

$("a.codeButtonB").click(function(e){
    e.preventDefault();
    $("pre.codeB").toggle()
});
2 голосов
/ 17 октября 2011

Добавьте return: false; к вашим click событиям.

0 голосов
/ 17 октября 2011

добавить return false к обеим функциям.

0 голосов
/ 17 октября 2011

Не используйте a теги для вещей, которые на самом деле не являются ссылками.Используйте тег button.

...