0

这是我的工作小提琴： http: //jsfiddle.net/exlondoner/YvPg9/ 我想要实现的是能够从媒体类型中选择（大纲）一个选项，从排序方式中选择一个项目，我该怎么做?

JS：

$('.media-select-option').on('click', function() {
 $(this).addClass('selected');
$('.overlay-close-btn').addClass('checked');    
});

html:

<div class="overlaymedia">
<div class='media-filter'>
    <div class="media-nav" role='contentinfo'>
        <div class="media-nav media-menu-container">

            <h5 class="media-menu-heading close-overlay-btn">Media Type</h5>
            <!-- Media Type: All/Photos/Videos -->
            <div class="media-select-option media-all" data-href="">All</div>
            <div class="media-select-option media-photos" data-href="">Photos</div>
            <div class="media-select-option media-videos" data-href="">Videos</div>

            <h5 class="media-menu-heading close-overlay-btn">Sort By</h5>
            <!-- Sort By: Latest/Popular -->
            <div class="media-select-option media-latest" data-href="">Latest</div>
            <div class="media-select-option media-popular" data-href="">Popular</div>
            <div class="media-menu-bottom close-overlay-btn">
                <div class="overlay-close-btn bottom">Close</div>
            </div>

        </div>
    </div>
</div>

CSS：

.overlay-close-btn:before { content: '×'; }

.overlay-close-btn.checked:before {
content: '✔';
}
.media-select-option {
border: solid 1px #fff;  
}
.selected {
border: solid 1px #f00;
}
4

2 回答 2

0

这是你想要达到的目标吗？- http://jsfiddle.net/skip405/YvPg9/2/

而且我还建议使用更语义化的标记。如果需要选择一个选项而不是其他选项 - 只需使用input[type="radio"]propper 即可label。

在我看来 - 你的标记应该是这样的 - http://jsfiddle.net/skip405/YvPg9/5/

于 2013-06-19T15:44:03.400 回答
0

通过把你的选择放在不同div的地方：

<div>
    <div class="media-select-option media-all" data-href="">All</div>
    <div class="media-select-option media-photos" data-href="">Photos</div>
    <div class="media-select-option media-videos" data-href="">Videos</div>
</div>

<h5 class="media-menu-heading close-overlay-btn">Sort By</h5>
<!-- Sort By: Latest/Popular -->
<div>
    <div class="media-select-option media-latest" data-href="">Latest</div>
    <div class="media-select-option media-popular" data-href="">Popular</div>
</div>

然后，您将能够通过以下方式实现您想要的：

$(this).siblings().removeClass('selected');

小提琴：http: //jsfiddle.net/YvPg9/3/

于 2013-06-19T15:43:42.267 回答