javascript-带选项卡的日程安排

我创建了一个为期一周的javascript日程安排和工作。但现在我在标签上遇到了一些问题，因为当我移动一个周期，在滑块上移动时，我遇到了图形问题

我在JSFIDLE上添加了代码，因为这样更容易理解和看到代码工作

这里有一个HTML代码：

<div class="container-fluid">
<div class="col-lg-6 col-md-8">
    <ul class="nav nav-pills">
        <li>
            <a data-toggle="pill" href="#tabs-1">Zone 1</a>
        </li>
        <li>
            <a data-toggle="pill" href="#tabs-2">Zone 2</a>
        </li>
        <li>
            <a data-toggle="pill" href="#tabs-3">Zone 3</a>
        </li>
        <li>
            <a data-toggle="pill" href="#tabs-4">Zone 4</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane fade in active" id="tabs-1">
            <div class="slider-label">Mon</div>
            <div class="slider" day="mon" zone="1"></div>
            <div class="slider-label">Tue</div>
            <div class="slider" day="tue" zone="1"></div>
            <div class="slider-label">Wed</div>
            <div class="slider" day="wed" zone="1"></div>
            <div class="slider-label">Thu</div>
            <div class="slider" day="thu" zone="1"></div>
            <div class="slider-label">Fri</div>
            <div class="slider" day="fri" zone="1"></div>
            <div class="slider-label">Sat</div>
            <div class="slider" day="sat" zone="1"></div>
            <div class="slider-label">Sun</div>
            <div class="slider" day="sun" zone="1"></div>
        </div>
        <div class="tab-pane fade in" id="tabs-2">
            <div class="slider-label">Mon</div>
            <div class="slider" day="mon" zone="2"></div>
            <div class="slider-label">Tue</div>
            <div class="slider" day="tue" zone="2"></div>
            <div class="slider-label">Wed</div>
            <div class="slider" day="wed" zone="2"></div>
            <div class="slider-label">Thu</div>
            <div class="slider" day="thu" zone="2"></div>
            <div class="slider-label">Fri</div>
            <div class="slider" day="fri" zone="2"></div>
            <div class="slider-label">Sat</div>
            <div class="slider" day="sat" zone="2"></div>
            <div class="slider-label">Sun</div>
            <div class="slider" day="sun" zone="2"></div>
        </div>
        <div class="tab-pane fade in" id="tabs-3">
            <div class="slider-label">Mon</div>
            <div class="slider" day="mon" zone="3"></div>
            <div class="slider-label">Tue</div>
            <div class="slider" day="tue" zone="3"></div>
            <div class="slider-label">Wed</div>
            <div class="slider" day="wed" zone="3"></div>
            <div class="slider-label">Thu</div>
            <div class="slider" day="thu" zone="3"></div>
            <div class="slider-label">Fri</div>
            <div class="slider" day="fri" zone="3"></div>
            <div class="slider-label">Sat</div>
            <div class="slider" day="sat" zone="3"></div>
            <div class="slider-label">Sun</div>
            <div class="slider" day="sun" zone="3"></div>
        </div>
        <div class="tab-pane fade in" id="tabs-4">
            <div class="slider-label">Mon</div>
            <div class="slider" day="mon" zone="4"></div>
            <div class="slider-label">Tue</div>
            <div class="slider" day="tue" zone="4"></div>
            <div class="slider-label">Wed</div>
            <div class="slider" day="wed" zone="4"></div>
            <div class="slider-label">Thu</div>
            <div class="slider" day="thu" zone="4"></div>
            <div class="slider-label">Fri</div>
            <div class="slider" day="fri" zone="4"></div>
            <div class="slider-label">Sat</div>
            <div class="slider" day="sat" zone="4"></div>
            <div class="slider-label">Sun</div>
            <div class="slider" day="sun" zone="4"></div>
        </div>
    </div>
</div>

周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳
周一
星期二
结婚
清华大学
星期五
坐
太阳

JSFIDLE上提供了包含javascript的完整代码

多谢各位

---

帮助你有点复杂。您应该使用console.log打印值，并使用代码检查器查看导致错误行为的原因。祝你好运，“我有图形问题”。这是一个非常模糊的描述。到底出了什么问题？所有浏览器都会出现这种情况吗？我刚刚用Chrome打开了你的小提琴，玩了很多滑块，但没有明显的问题。问题是当你移动滑块时，当你进入分离期并移动时。滑块的左侧和宽度大小有问题。你可以看到这个问题吗？我为演示bug添加了一个图像。当我在slider\u update\u ui上添加标记zone=时，我只在tab上发现了这个bug。当我移动滑块时，我有一个错误！我完全不明白你的问题是什么。图像显示了问题，但您的小提琴无法轻松再现。您应该添加一个详细的分步指南，介绍如何使用JSFIDLE重现该问题。我可以看出你的英语不是很好，所以花点时间仔细写（用谷歌翻译等其他辅助工具）。