Question

我尝试使用buttoms而非UL＆amp; amp; LI

我在Jquery代码上遇到问题，显示与所点击的标签对应的部分。

我的HTML看起来像这样：

<div class="container">
    <button class="tab-1">Copenhagen</button>
    <button class="tab-2">London</button>
    <button class="tab-3">New York</button>
</div>

<div id="content">

    <div class="tab-1">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="tab-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="tab-1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>    
</div>

我的jQuery看起来像这样：

$( document ).ready(function() {

    $(function(){
        $('.container button:first').addClass('active');
        $('#content div').hide();
        $('#content div:first').show();

        $('.container button').on('click',function(){
            $('.container button').removeClass('active');
            $(this).addClass('active')

            $('#content div').hide();
            var activeTab = $(this).attr('class');
            alert(activeTab);

            $(activeTab).show();
            return false;
        });
    })

});

上面的行返回并不显示与点击的标签对应的div部分。

我已经使用了类作为标签和要显示的部分之间的导航句柄，但我不确定是否有更好的方法来执行此操作。

请帮助或建议更好的方法来处理节目部分。

问候弗莱明

Answer 1

所有内容div都具有相同的类别。

＆＃13;

$('.container button:first').addClass('active');
$('#content div').hide();
$('#content div:first').show();

$('.container button').on('click', function (e) {
    $('.container button').removeClass('active');
    var activeTab = $(this).attr('class');
    $(this).addClass('active')
    $('#content div').hide();
    $('#content div.' + activeTab).show();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
    <button class="tab-1">Copenhagen</button>
    <button class="tab-2">London</button>
    <button class="tab-3">New York</button>
</div>

<div id="content">

    <div class="tab-1">
        <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="tab-2">
       <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <div class="tab-3">
        <p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

＆＃13;

无法让jQuery显示标签式导航内容

1 个答案: