Question

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

这是指向page的链接（仍然非常在开发中）。

这是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属性，但ID似乎确实给你想要你想要的。

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

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

此外，我猜测<a>元素的默认行为是在您点击时刷新页面。

使用<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/

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

1 个答案: