Html 选项卡集不显示选项卡内容_Html_Css_Tabs

Html 选项卡集不显示选项卡内容

html css tabs

Html 选项卡集不显示选项卡内容,html,css,tabs,Html,Css,Tabs,如果按“tab 2”，它工作正常。但如果您尝试按“Tab one”返回，它不会显示Tab one的内容我尝试了不同的方法，但是我找不到应该在代码中修改什么来使其工作 HTML: 这里有一个难题：尝试使用其他结构 <div class="tabs"> <div class="tab" id="tab-1"> <div class="content">Content One</div> </div>

如果按“tab 2”，它工作正常。但如果您尝试按“Tab one”返回，它不会显示Tab one的内容

我尝试了不同的方法，但是我找不到应该在代码中修改什么来使其工作

HTML:

这里有一个难题：

尝试使用其他结构

<div class="tabs">
    <div class="tab" id="tab-1">
        <div class="content">Content One</div>
    </div>
    <div class="tab" id="tab-2">
        <div class="content">Content Two</div>
    </div>
    <ul class="tabs-link">
        <li class="tab-link"> <a href="#tab-1"><span>Tab 1</span></a>

        </li>
        <li class="tab-link"> <a href="#tab-2"><span>Tab 2</span></a>

        </li>
    </ul>
</div>

您可以根据需要修改选项卡

小提琴：

非常感谢纳斯塔西亚！我的头快要爆炸了：）

以下是工作的原始代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker navigation from a marker menu</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<style>
  .info {
    background:#fff;
    position:absolute;
    width:260px;
    top:10px;
    right:10px;
    border-radius:2px;
    }
    .info .item {
      display:block;
      border-bottom:1px solid #eee;
      padding:10px;
      text-decoration:none;
      }
      .info .item small { color:#888; }
      .info .item:hover,
      .info .item.active { background:#f8f8f8; }
      .info .item:last-child { border-bottom:none; }

.leaflet-popup-content {
  width:240px;    
  }

.tabs {
    position:relative;
    min-height:200px;
    clear:both;
    margin:25px 0;
}
.tab {
    float:left;
    display: none;
}
.tab:first-of-type {
    display: inline-block;
}
.tabs-link {
    position: relative;
    top: -14px;
    height: 20px;
    left: -40px;
}
.tab-link {
    background:#eee;
    display: inline-block;
    padding:10px;
    border:1px solid #ccc;
    margin-left:-1px;
    position:relative;
    list-style-type: none;
    left:1px;
    top:1px;
    cursor:pointer;
}
.tab-link {
    background:#f8f8f8;
}
.content {
    background:white;
    position:absolute;
    top:28px;
    left:0;
    right:0;
    bottom:0;
    padding:20px;
    border:1px solid #ccc;
}
.tab:target {
    display: block;
}






</style>

<div id='map' class='map'></div>
<div id='info' class='info'></div>

<script>


var map = L.mapbox.map('map', 'examples.h186knp8').setView([37.9, -77], 6);

var myLayer = L.mapbox.featureLayer().addTo(map);

myLayer.setGeoJSON([{
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-77, 37.9]
    },
    properties: {
        title: 'Marker one',
        description: 'This marker has a description',
        'marker-id': 'marker-1',
        'marker-color': '#f86767'
    }
}, {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-78, 36.5]
    },
    properties: {
        title: 'Marker two',
        description: 'So does this one!',
        'marker-id': 'marker-2',
        'marker-color': '#f86767'
    }
}]);

var info = document.getElementById('info');

// Iterate through each feature layer item, build a
// marker menu item and enable a click event that pans to + opens
// a marker that's associated to the marker item.
myLayer.eachLayer(function (marker) {

    // here you call `bindPopup` with a string of HTML you create - the feature
    // properties declared above are available under `layer.feature.properties`
    var p = marker.feature.properties;





    var content = '<div class="tabs">' +

            '<div class="tab" id="tab-1">' +
            '<div class="content">' +
            p.title +
            '</div>' +
            '</div>' +

            '<div class="tab" id="tab-2">' +
            '<div class="content">' +
            p.description +
            '</div>' +
            '</div>' +

            '<ul class="tabs-link">' +
            '<li class="tab-link"> <a href="#tab-1"><span>Tab 1</span></a></li>' +
            '<li class="tab-link"> <a href="#tab-2"><span>Tab 2</span></a></li>' +
            '</ul>' +



        '</div>';

    myLayer.bindPopup(content);

    var link = info.appendChild(document.createElement('a'));
    link.className = 'item';
    link.href = '#';

    // Populate content from each markers object.
    link.innerHTML = marker.feature.properties.title +
        '<br /><small>' + marker.feature.properties.description + '</small>';
    link.onclick = function () {
        if (/active/.test(this.className)) {
            this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
        } else {
            var siblings = info.getElementsByTagName('a');
            for (var i = 0; i < siblings.length; i++) {
                siblings[i].className = siblings[i].className
                    .replace(/active/, '').replace(/\s\s*$/, '');
            };
            this.className += ' active';

            // When a menu item is clicked, animate the map to center
            // its associated marker and open its popup.
            map.panTo(marker.getLatLng());
            marker.openPopup();
        }
        return false;
    };
});
</script>
</body>
</html>


从标记菜单进行标记导航
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
.info{
背景：#fff；
位置：绝对位置；
宽度：260px；
顶部：10px；
右：10px；
边界半径：2px；
}
.info.item{
显示：块；
边框底部：1px实心#eee；
填充：10px；
文字装饰：无；
}
.info.item小{颜色：#888；}
.info.item:悬停，
.info.item.active{背景：#f8f8；}
.info.item:最后一个子项{边框底部：无；}
.单张弹出内容{
宽度：240px；
}
.标签{
位置：相对位置；
最小高度：200px；
明确：两者皆有；
利润率：25px0；
}
.标签{
浮动：左；
显示：无；
}
.tab：类型的第一个{
显示：内联块；
}
.tabs链接{
位置：相对位置；
顶部：-14px；
高度：20px；
左：-40px；
}
.tab链接{
背景：#eee；
显示：内联块；
填充：10px；
边框：1px实心#ccc；
左边距：-1px；
位置：相对位置；
列表样式类型：无；
左：1px；
顶部：1px；
光标：指针；
}
.tab链接{
背景：#f8f8；
}
.内容{
背景：白色；
位置：绝对位置；
顶部：28px；
左：0；
右：0；
底部：0；
填充：20px；
边框：1px实心#ccc；
}
.选项卡：目标{
显示：块；
}
var map=L.mapbox.map（'map'，'examples.h186knp8'）.setView（[37.9，-77]，6）；
var myLayer=L.mapbox.featureLayer（）.addTo（map）；
myLayer.setGeoJSON([{
键入：“功能”，
几何图形：{
键入：“点”，
座标：[-77,37.9]
},
特性：{
标题：“标记一”，
description:'此标记具有说明'，
“标记id”：“标记-1”，
“标记颜色”：“f86767”
}
}, {
键入：“功能”，
几何图形：{
键入：“点”，
座标：[-78,36.5]
},
特性：{
标题:"标记二",，
描述：“这一个也是！”，
“标记id”：“标记-2”，
“标记颜色”：“f86767”
}
}]);
var info=document.getElementById（'info'）；
//迭代每个要素图层项，构建一个
//标记菜单项并启用平移到+打开的单击事件
//与标记项关联的标记。
myLayer.eachLayer（函数（标记）{
//在这里，您使用创建的HTML字符串调用'bindpoppopup'，这是一个特性
//上面声明的属性在“layer.feature.properties”下可用`
var p=marker.feature.properties；
变量内容=“”+
'' +
'' +
p、 头衔+
'' +
'' +
'' +
'' +
p、 描述+
'' +
'' +
“”+
“”+
“”+
“”+
'';
myLayer.bindPopup（内容）；
var link=info.appendChild（document.createElement（'a'））；
link.className='item'；
link.href='#'；
//从每个标记对象填充内容。
link.innerHTML=marker.feature.properties.title+
“
”+marker.feature.properties.description+”；
link.onclick=函数（）{
if（/active/.test（this.className））{
this.className=this.className.replace（/active/，''）.replace（/\s\s*$/，''）；
}否则{
var sides=info.getElementsByTagName（'a'）；
对于（变量i=0；i<1.length；i++）{
兄弟姐妹[i].className=兄弟姐妹[i].className
.replace（/active/，“”）。replace（/\s\s*$/，“”）；
};
this.className+=“活动”；
//单击菜单项时，将贴图设置为中心动画
//并打开其弹出窗口。
map.panTo（marker.getLatLng（））；
marker.openPopup（）；
}
返回false；
};
});

您能在代码中添加一个吗？这与传单或弹出窗口无关。你在HTML/CSS方面遇到了困难，因此我相应地编辑了你的问题和标签，并添加了一个提琴。是的，它不会起作用，因为你不能用CSS选择上一个元素，而只能选择下一个元素。非常感谢iH8，我至少更了解它。这只是html+css的问题。感谢Manoj Kumar提供的信息，那么解决方案是什么呢？对不起，我是一个乞丐，所以我有点迷路了。我在网上找到了很多用html+css制作标签菜单的解决方案，但我不知道什么是最好的解决方案。。？

<div class="tabs">
    <div class="tab" id="tab-1">
        <div class="content">Content One</div>
    </div>
    <div class="tab" id="tab-2">
        <div class="content">Content Two</div>
    </div>
    <ul class="tabs-link">
        <li class="tab-link"> <a href="#tab-1"><span>Tab 1</span></a>

        </li>
        <li class="tab-link"> <a href="#tab-2"><span>Tab 2</span></a>

        </li>
    </ul>
</div>

.tabs {
    position:relative;
    min-height:200px;
    clear:both;
    margin:25px 0;
}
.tab {
    float:left;
    display: none;
}
.tab:first-of-type {
    display: inline-block;
}
.tabs-link {
    position: relative;
    top: -12px;
    height: 20px;
    left: -40px;
}
.tab-link {
    background:#eee;
    display: inline-block;
    padding:10px;
    border:1px solid #ccc;
    margin-left:-1px;
    position:relative;
    list-style-type: none;
    left:1px;
    top:1px;
    cursor:pointer;
}
.tab-link {
    background:#f8f8f8;
}
.content {
    background:white;
    position:absolute;
    top:28px;
    left:0;
    right:0;
    bottom:0;
    padding:20px;
    border:1px solid #ccc;
}
.tab:target {
    display: block;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Marker navigation from a marker menu</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>


<style>
  .info {
    background:#fff;
    position:absolute;
    width:260px;
    top:10px;
    right:10px;
    border-radius:2px;
    }
    .info .item {
      display:block;
      border-bottom:1px solid #eee;
      padding:10px;
      text-decoration:none;
      }
      .info .item small { color:#888; }
      .info .item:hover,
      .info .item.active { background:#f8f8f8; }
      .info .item:last-child { border-bottom:none; }

.leaflet-popup-content {
  width:240px;    
  }

.tabs {
    position:relative;
    min-height:200px;
    clear:both;
    margin:25px 0;
}
.tab {
    float:left;
    display: none;
}
.tab:first-of-type {
    display: inline-block;
}
.tabs-link {
    position: relative;
    top: -14px;
    height: 20px;
    left: -40px;
}
.tab-link {
    background:#eee;
    display: inline-block;
    padding:10px;
    border:1px solid #ccc;
    margin-left:-1px;
    position:relative;
    list-style-type: none;
    left:1px;
    top:1px;
    cursor:pointer;
}
.tab-link {
    background:#f8f8f8;
}
.content {
    background:white;
    position:absolute;
    top:28px;
    left:0;
    right:0;
    bottom:0;
    padding:20px;
    border:1px solid #ccc;
}
.tab:target {
    display: block;
}






</style>

<div id='map' class='map'></div>
<div id='info' class='info'></div>

<script>


var map = L.mapbox.map('map', 'examples.h186knp8').setView([37.9, -77], 6);

var myLayer = L.mapbox.featureLayer().addTo(map);

myLayer.setGeoJSON([{
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-77, 37.9]
    },
    properties: {
        title: 'Marker one',
        description: 'This marker has a description',
        'marker-id': 'marker-1',
        'marker-color': '#f86767'
    }
}, {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [-78, 36.5]
    },
    properties: {
        title: 'Marker two',
        description: 'So does this one!',
        'marker-id': 'marker-2',
        'marker-color': '#f86767'
    }
}]);

var info = document.getElementById('info');

// Iterate through each feature layer item, build a
// marker menu item and enable a click event that pans to + opens
// a marker that's associated to the marker item.
myLayer.eachLayer(function (marker) {

    // here you call `bindPopup` with a string of HTML you create - the feature
    // properties declared above are available under `layer.feature.properties`
    var p = marker.feature.properties;





    var content = '<div class="tabs">' +

            '<div class="tab" id="tab-1">' +
            '<div class="content">' +
            p.title +
            '</div>' +
            '</div>' +

            '<div class="tab" id="tab-2">' +
            '<div class="content">' +
            p.description +
            '</div>' +
            '</div>' +

            '<ul class="tabs-link">' +
            '<li class="tab-link"> <a href="#tab-1"><span>Tab 1</span></a></li>' +
            '<li class="tab-link"> <a href="#tab-2"><span>Tab 2</span></a></li>' +
            '</ul>' +



        '</div>';

    myLayer.bindPopup(content);

    var link = info.appendChild(document.createElement('a'));
    link.className = 'item';
    link.href = '#';

    // Populate content from each markers object.
    link.innerHTML = marker.feature.properties.title +
        '<br /><small>' + marker.feature.properties.description + '</small>';
    link.onclick = function () {
        if (/active/.test(this.className)) {
            this.className = this.className.replace(/active/, '').replace(/\s\s*$/, '');
        } else {
            var siblings = info.getElementsByTagName('a');
            for (var i = 0; i < siblings.length; i++) {
                siblings[i].className = siblings[i].className
                    .replace(/active/, '').replace(/\s\s*$/, '');
            };
            this.className += ' active';

            // When a menu item is clicked, animate the map to center
            // its associated marker and open its popup.
            map.panTo(marker.getLatLng());
            marker.openPopup();
        }
        return false;
    };
});
</script>
</body>
</html>