Question

如果按“tab Two”，它的工作正常。但是如果你试图按回“Tab one”，它就不会显示一个内容。

我尝试了不同的方法，但是我找不到我应该在代码中修改的内容以使其正常工作。

HTML：

<div class="tabs">
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked="">
        <label for="tab-1">
           Tab One
        </label>
        <div class="content">
            Content One
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-2">
        <label for="tab-2">
            Tab Two
        </label>
        <div class="content">
            Content Two
        </div>
    </div>
</div>

CSS：

.tabs {
  position:relative;
  min-height:200px;
  clear:both;
  margin:25px 0;
  }
.tab {
  float:left;
  }
.tab label {
  background:#eee;
  padding:10px;
  border:1px solid #ccc;
  margin-left:-1px;
  position:relative;
  left:1px;
  top:1px;
  cursor:pointer;
  }
.tab label:hover {
  background:#f8f8f8;
  }
.tab [type=radio] {
  display:none;
  }
.content {
  background:white;
  position:absolute;
  top:28px;
  left:0;
  right:0;
  bottom:0;
  padding:20px;
  border:1px solid #ccc;
  }
[type=radio]:checked ~ label {
  background:white;
  border-bottom:1px solid white;
  z-index:2;
  }
[type=radio]:checked ~ label ~ .content {
  z-index:1;
  }

这是一个小提琴：http://jsfiddle.net/36r0ptat/

Answer 1

尝试使用其他构造

<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>

修正了css

.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;
}

您可以自行修改所需的标签

小提琴：http://jsfiddle.net/Anglan/36r0ptat/4/

Answer 2

非常感谢Nastasia！我的脑袋即将爆炸:)。

以下是原始代码：

<!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>

标签集不显示标签内容

2 个答案: