如何使用 jQuery 更改选项卡式内容？

Question

我正在使用 jQuery 在三个单独的视图中显示内容。但是，我只能显示第一个（默认）视图。注意：这没有使用 jQuery UI。

这是页面的链接（仍在开发中）。

这是 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");

...因为你没有标题属性，但 ID 似乎确实给了你想要的。

由于内容区域的 ID 以“-content”结尾，因此您需要将其附加到 content_show 中的 ID。

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

另外，我猜测 元素的默认行为是在您单击时刷新页面。

您应该使用 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/