Question

我正在创建一个地图，旁边有一个标签导航。我使用本教程时，选项卡导航可以单独正常运行： https://codyhouse.co/gem/responsive-tabbed-navigation/

但是，当我添加地图并将其添加在一起时，它将停止工作。

有人领导这个问题吗？

代码部分：

 <div class="container">   
        <div class="col-md-12">
            <div class="media-container-row">
                <div class="col-md-" id="mapid" style="width: 600px; height: 400px;">
                <script>

    var mymap = L.map('mapid').setView([51.505, -0.09], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

</script>

                </div>
                <div class=" col-md-6">
                    <nav>
            <ul class="cd-tabs__navigation js-cd-navigation">
                <li><a data-content="inbox" class="cd-selected" href="#0">Inbox</a></li>
                <li><a data-content="new" href="#0">New</a></li>
                <li><a data-content="gallery" href="#0">Gallery</a></li>
                <li><a data-content="gallery" href="#0">Gallery</a></li>
            </ul> <!-- cd-tabs__navigation -->
        </nav>

        <ul class="cd-tabs__content js-cd-content">
            <li data-content="inbox" class="cd-selected">
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum recusandae rem animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam eveniet laboriosam?</p>

            </li>

            <li data-content="new">
                <p>New Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non a voluptatibus, ex odit totam cumque nihil eos asperiores ea, labore rerum. Doloribus tenetur quae impedit adipisci, laborum dolorum eaque ratione quaerat, eos dicta consequuntur atque ex facere voluptate cupiditate incidunt.</p>

            </li>

            <li data-content="gallery">
                <p>Gallery Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque tenetur aut, cupiditate, libero eius rerum incidunt dolorem quo in officia.</p>
            </li>
            <li data-content="gallery">
                <p>Gallery Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque tenetur aut, cupiditate, libero eius rerum incidunt dolorem quo in officia.</p>
            </li>
        </ul> <!-- cd-tabs__content -->


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

标签页导航不会改变

0 个答案: