单选框选择内容

by kikodo tang

HTML

<ul>
    <li class="select1">a</li>
    <li class="select2">b</li>
    <li class="select3">c</li>
</ul>
<div class="content">
    <div class="display select1">content1</div>
    <div class="display select2">content2</div>
    <div class="display select3">content3</div>
</div>

CSS

.red {
    background-color: red;
}
li {
    display: inline-block;
    width: 20px;
}
.content {
    height: 50px;
    width: 100px;
    outline: 1px solid blue;
}

JavaScript

$(function () {
    $('.content').find('.display').hide();
    $('.content').find('.display:first').show();
    $('ul').click(function (event) {
        var klass = $(event.target).attr('class').split(' ')[0];
        $(event.target).addClass('red').siblings().removeClass('red')
        $('.content').find('.'+klass).show().siblings().hide();
    });
})