Как я могу изменить содержимое вкладки, используя jQuery?

Question

Я использую jQuery для отображения контента в трех отдельных видах. Однако я могу получить только первый (по умолчанию) вид для отображения. Примечание: это не использует jQuery UI.

Вот ссылка на страницу (все еще очень много в dev).

Вот HTML:

<div id="tabbed_area">
            <ul class="tabs">
                <li><a id="services" class="tab active" href="#">Services</a></li>
                <li><a id="supplies" class="tab" href="#">Supplies</a></li>
                <li><a id="diy" class="tab" href="#">DIY</a></li>
            </ul>
            <br class="clearer" />
                <div id="services-content" class="content">
                    <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p>
                    <h3>This is the main headline</h3>
                    <h4>Headline Goes Here</h4>
                    <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p>
                </div>
                <div id="supplies-content" class="content">
                    <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p>
                    <h3>This is the main headline</h3>
                    <h4>Headline Goes Here</h4>
                    <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p>
                </div>
                <div id="diy-content" class="content">
                    <p class="intro">Welcome to <a href="#">Moving Simplified</a>. Features and benefits go here on the home page to drive.</p>
                    <h3>This is the main headline</h3>
                    <h4>Headline Goes Here</h4>
                    <p>Welcome to Moving Simplified. Features and benefits go here on the ome page to drive home the point that you are affordable, professional, knowledgeable, amd make the move real.</p>
                </div>
        </div>

Вот CSS:

#mainContent #tabbed_area           { padding: 0 20px; position: relative; z-index: 50; }
ul.tabs                 { margin: 0px; padding: 0px; }
ul.tabs li                  { list-style: none; float: left; display: inline; }
ul.tabs li a#services           { 
                        width: 113px;
                        height: 36px;
                        display: block;
                        text-indent: -9999px;
                        border: none;
                        background: url(../_images/btn_services.png) no-repeat center top; }
ul.tabs li a#supplies               { 
                        width: 113px;
                        height: 36px;
                        display: block;
                        text-indent: -9999px;
                        border: none;
                        background: url(../_images/btn_supplies.png) no-repeat center bottom; }                                 
ul.tabs li a#diy                    { 
                        width: 113px;
                        height: 36px;
                        display: block;
                        text-indent: -9999px;
                        border: none;
                        background: url(../_images/btn_diy.png) no-repeat center bottom; }

 ul.tabs li a#services:hover,
 ul.tabs li a#supplies:hover,
 ul.tabs li a#diy:hover  { background-position: center center; }                                

#supplies-content, #diy-content { display: none; }

И, наконец, вот jQuery:

<script type="text/javascript">
$(document).ready(function() {
$("a.tab").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(.content).slideUp();

    var content_show = $(this).attr("title");
    $("#"+content_show).slideDown();
    });
});
</script> 

Answer 1

Эта строка:

    $(.content).slideUp();

должна быть:

    $(".content").slideUp();

А это:

var content_show = $(this).attr("title");

должно быть:

var content_show = $(this).attr("id");

... так как у вас нет атрибута title, но идентификатор, кажется, дает вам желаемое.

А так как в области содержимого есть идентификатор, заканчивающийся на "-content", вам необходимодобавьте это к идентификатору от content_show.

$("#" + content_show + '-content').slideDown();

Кроме того, я предполагаю, что поведение элемента <a> по умолчанию обновляет страницу при нажатии.

Youдолжно предотвращать поведение по умолчанию <a> при нажатии с помощью event.preventDefault()

$("a.tab").click(function( evt ) {
    // Prevents the default behavior of the <a> from occurring
    evt.preventDefault();
    $(".active").removeClass("active");
    $(this).addClass("active");
    var content_show = $(this).attr("id");
         // only slide up the visible content
    $(".content:visible").slideUp();
         // you need to append '-content' to the ID to make
         //    match the proper content area
    $("#" + content_show + '-content').slideDown();

});​

• http://api.jquery.com/event.preventDefault/