Question

我想让我的响应式标签按此下拉

桌面/大屏幕视图

移动视图

这就是我所拥有的代码，我不知道这是否只能使用CSS或需要Javascript / jQuery。

<div class="bottomRight">
    <input type="radio" id="popularUpload" name="upload" checked="checked">
    <label for="popularUpload" class="popularUpload">Popular Uploads</label>
    <input type="radio" id="recentUpload" name="upload">
    <label for="recentUpload" class="recentUpload">Recent Uploads</label>
    <input type="radio" id="gallery" name="upload">
    <label for="gallery" class="gallery">Gallery</label>
        <div class="popUploadContent">...</div>
        <div class="recUploadContent">...</div>
        <div class="galleryContent">...</div>
</div>

这是我的CSS代码。

#popularUpload,
#recentUpload,
#gallery {
    display: none;
}

.popularUpload {
    font-size: 15px;
    font-weight: bold;
    color: #dddfe2;
    background: #111625;
    padding: 20px 4%;
    position: relative;
    cursor: pointer;
    z-index: 500;
    display: block;
    width: 120px;
    text-align: center;
    float: left;
}

.recentUpload {
    float: left;
    font-size: 15px;
    font-weight: bold;
    color: #dddfe2;
    background: #111625;
    padding: 20px 4%;
    position: relative;
    cursor: pointer;
    z-index: 500;
    display: block;
    width: 110px;
    text-align: center;
    border-right: 1px solid #0b0e18;
    border-left: 1px solid #0b0e18;
}

.gallery {
    float: left;
    font-size: 15px;
    font-weight: bold;
    color: #dddfe2;
    background: #111625;
    padding: 20px 4%;
    position: relative;
    cursor: pointer;
    z-index: 500;
    display: block;
    width: 60px;
    text-align: center;
}

.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
    color: #eeb10c;
    transition: all .5s ease;
}

#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
    background: #0b0f17;
    color: #eeb10c;
    transition: all .5s ease;
}

#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
    visibility: visible;
    transition: all .3s ease;
}

.popUploadContent,
.recUploadContent,
.galleryContent {
    visibility: hidden;
    background: #0b0f17;
    position: absolute;
    margin-top: 54px;
    height: 299px;
}

.popUploadContentLeft,
.recUploadContentLeft,
.galleryContentLeft {
    float: left;
    width: 46.4%;
    margin-left: 2.5%;
    margin-top: 19px;
}

或者，如果您可以建议和编辑我的代码，那就更好了。这是我的JSFiddle https://jsfiddle.net/8druLycp/

Answer 1

您可以使用Bootstrap标签：http://getbootstrap.com/javascript/#tabs。（使用javascript和jQuery），然后使用CSS对其进行个性化处理？

编辑1

为了在不使用上述解决方案的情况下使其响应，仍然使用Boostrap及其网格系统（例如col-md-3 col-sm-4 col-xs-12）。因此，当它是一个小屏幕时，选项卡菜单的每个部分都将采用整个宽度。查看https://getbootstrap.com/examples/grid/

编辑2

另一种解决方案，我现在可以建议您使用此方法：http://tabcollapse.okendoken.com。请参阅演示：http://tabcollapse.okendoken.com/example/example.html

编辑3

最后，这是一个使用下拉菜单的解决方案：https://jsfiddle.net/Alteyss/wypp0hz8/：

div#tabsBlock > ul.nav-tabs > li.dropdown {
    display: none;
}

@media screen and (max-width: 500px) {
    div#tabsBlock > ul.nav-tabs > li.lg {
        display: none;
    }
    div#tabsBlock > ul.nav-tabs > li.dropdown {
        display: block;
    }
}

我设置了一个限制（你可以更改500px），所以当它低于500px宽度时，会出现下拉列表，其他选项卡会消失。然后，您可以根据需要在网站中的css中对其进行个性化处理;）

（带药丸：https://jsfiddle.net/Alteyss/wypp0hz8/5/）

Answer 2

我认为可能的解决方案是hide未选择标签，并为所有标签100% width。然后，您可以添加class来控制其显示，此class可以使用非常简单的jQuery进行切换。

我给你看一个关于snnipet的例子。唯一剩下的就是控制活动选项卡以在选择时显示其标签，并使用插入符来控制类切换而不是label。

要仅将其应用于移动版，只需使用媒体查询添加。

＆＃13;

$(function(){
 $('.popularUpload').on('click', function(){
  $('.recentUpload').toggleClass('shown');
  $('.gallery').toggleClass('shown');
 });
});

＆＃13;

#popularUpload,
#recentUpload,
#gallery {
	display: none;
}

.popularUpload {
	font-size: 15px;
	font-weight: bold;
	color: #dddfe2;
	background: #111625;
	padding: 20px 4%;
	cursor: pointer;
	z-index: 500;
	display: none;
	width: 100%;
	text-align: center;
	float: left;
}

.popularUpload.shown{
    display: block;
}

.recentUpload {
    display: none;
	float: left;
	font-size: 15px;
	font-weight: bold;
	color: #dddfe2;
	background: #111625;
	padding: 20px 4%;
	cursor: pointer;
	z-index: 500;
	width: 100%;
	text-align: center;
	border-right: 1px solid #0b0e18;
	border-left: 1px solid #0b0e18;
}

.recentUpload.shown{
    display: block;
}

.gallery {
    display: none;
	float: left;
	font-size: 15px;
	font-weight: bold;
	color: #dddfe2;
	background: #111625;
	padding: 20px 4%;
	cursor: pointer;
	z-index: 500;
	width: 100%;
	text-align: center;
}

.gallery.shown {
    display: block;
}

.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
	color: #eeb10c;
	transition: all .5s ease;
}

#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
	background: #0b0f17;
	color: #eeb10c;
	transition: all .5s ease;
}

#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
    display: block;
	transition: all .3s ease;
}

.popUploadContent,
.recUploadContent,
.galleryContent {
    display: none;
	background: #0b0f17;
	height: 299px;
    width: 100%;
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomRight">
    <input type="radio" id="popularUpload" name="upload" checked="checked">
    <label for="popularUpload" class="popularUpload shown">Popular Uploads</label>
    <input type="radio" id="recentUpload" name="upload">
    <label for="recentUpload" class="recentUpload">Recent Uploads</label>
    <input type="radio" id="gallery" name="upload">
    <label for="gallery" class="gallery">Gallery</label>
        <div class="popUploadContent">popular content</div>
        <div class="recUploadContent">recent content</div>
        <div class="galleryContent">gallery content</div>
</div>

＆＃13;

如何在移动视图中制作响应式标签

2 个答案:

编辑1

编辑2

编辑3