Question

嗨，这是我的图像滑块的标记。

<div role="main">
    <div class="slideshow cycle-slideshow home-listings-slider" data-cycle-timeout="10000" data-cycle-auto-height="container" data-cycle-log="false" data-cycle-slides="div.slide" data-cycle-fx="scrollHorz" data-pause-on-hover="true">       
        <div class="cycle-prev direction"><i class="fa fa-chevron-left"></i></i></div>
        <div class="cycle-next direction"><i class="fa fa-chevron-right"></i></div>
        <div id="pager" class="cycle-pager"></div>
        <?php 
          $images = get_option('homepage_images');  
          $image_url = get_option('siteurl').'/wp-content/uploads/slideshow/'; 
          foreach($images as $image){ ?>
            <div class="slide">
            <figure>
                <a href="<?php echo $image['link']; ?>" style="background-image: url(<?php echo $image_url . $image['large']; ?>)"></a>
                <span class="overlay-text"><?php echo $image['text']; ?></span>
            </figure>
            </div>
        <?php } ?>

底部有导航点的部分是这样的，（在上面的代码中也是如此）

<div id="pager" class="cycle-pager"></div>

系统会在运行时自动将代码填入此代码中，但是当它发生时，我们就会得到它。

<span class="cycle-pager-active">•</span>

div内部的点真的是在破坏风格，如何使用PHP，JavaScript，HTML，CSS在前端删除它？任何帮助将不胜感激。

干杯

路

Answer 1

要删除.cycle-pager-active的内容，请将其添加到页面中，页脚中的某个位置（就在关闭</body>之前就好了）：

<script type="text/javascript">
    setTimeout( function() {
        document.querySelectorAll('.cycle-pager-active').innerHtml = "";
    }, 1000);
</script>

~~这只会针对页面中具有类cycle-pager-active的第一个DOM元素运行。如果您有多个并且想要将其全部清空，请将.querySelector替换为.querySelectorAll。~~

您不需要jQuery，但如果它已经加载到页面中，您可以用以下内容替换脚本内容：

$(document).on('load', function(){
     $('.cycle-pager-active').html('');
})

这将清空类cycle-pager-active的所有元素。

Answer 2

这是一个简单的修复。

.cycle-pager-active {overflow: hidden;}

这绝对有效。

完整代码：

.home-listings-slider .cycle-pager span:hover,
.home-listings-slider .cycle-pager span.cycle-pager-active {
    background: #fff;
    overflow: hidden;
    text-indent: -99px;
}

如何从滑块中删除html代码？

2 个答案: