Это хороший способ сделать динамическое переключение контента для сайта? (Jquery) - PullRequest
Новая
       12

Это хороший способ сделать динамическое переключение контента для сайта? (Jquery)

0 голосов
/ 11 декабря 2011 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){
    $(".ContentLoader").click(function(){
        $.page = $(this).attr("goto");
        $("#content").slideToggle(500, function(){
            $(this).load("/pages/"+$.page+".php", function(){
                $(this).slideToggle(500);
            });
        });

    });

});
</script>

<style>
#menu{border: 2px solid black; padding: 5px; border-radius: 7px}
#menu a{background-color: skyblue; padding: 2px 20px 2px 20px}
#content{padding: 10px; background-color: silver; border: 2px solid black; border-radius: 7px; margin-top: 5px}
</style>

<body>

<div id="menu">
    <a href="javascript:" goto="default" class="ContentLoader">Main</a>
    <a href="javascript:" goto="contact" class="ContentLoader">Contact</a>
    <a href="javascript:" goto="default" class="ContentLoader">About</a>
    <a href="javascript:" goto="default" class="ContentLoader">Sign Up</a>
    <a href="javascript:" goto="default" class="ContentLoader">Partners</a>
</div>

<div id="content">
    hey
</div>

</body>

</html>

Это хороший способ сделать динамический переключатель контента ???Также мне пришлось использовать href = "javascript:", чтобы предотвратить загрузку страницы при нажатии на ссылку.

Не могли бы вы, ветераны, сказать мне, нужно ли его улучшить?

1 Ответ

0 голосов
/ 11 декабря 2011

Нет необходимости указывать одно и то же имя класса на каждом теге at. Просто используйте $ ("# menu a")

goto не является допустимым атрибутом. Используйте новые атрибуты данных (http://ejohn.org/blog/html-5-data-attributes/) 

<script>
$(document).ready(function(event){

    $("#menu a").click(function(){
        event.preventDefault();
        $.page = $(this).data("goto");
        $("#content").slideToggle(500, function(){
            $(this).load("/pages/"+$.page+".php", function(){
                $(this).slideToggle(500);
            });
        });

    });

});
</script>
<div id="menu">
    <a href="#default" data-goto="default">Main</a>
    <a href="#contact" data-goto="contact">Contact</a>
    <a href="#about" data-goto="default">About</a>
    <a href="#signup" data-goto="default">Sign Up</a>
    <a href="#Partners" data-goto="default">Partners</a>
</div>

используйте привязку в ваших URL, а затем используйте event.preventDefault (); также посмотрите на http://tkyk.github.com/jquery-history-plugin/

...