html css js，滑块求助！

html-css025

html css js，滑块求助！,第1张

布局

<div id="con">

<ul id="tags">

<li class="selectTag"><a >标签一</a></li>

<li><a>标签二</a></li>

<li><a>自适应宽度的标签</a></li>

<li><a>自适应宽度的标签自适应宽度的</a></li>

<li><a>自适应宽度的标签</a></li>

</ul>

<div id="tagContent">

<div class="tagContent selectTag">第一个标签的内容</div>

<div class="tagContent">第二个标签的内容</div>

<div class="tagContent">第三个标签的内容</div>

<div class="tagContent">第4个标签的内容</div>

<div class="tagContent">第5个标签的内容</div>

</div>

</div>

JQ.

<script type="text/javascript">

$(function () {

$("#tags >li").bind("click", function () {

$(this).addClass("selectTag")

var index = $(this).index()

$("#tags >li").each(function (i) {if (i != index) { $(this).removeClass("selectTag")}})

$("#tagContent >div").each(function (i) {

if (i == index) { $(this).show().addClass("selectTag")}

else {$(this).hide().removeClass("selectTag")}

})

})

})

</script>

自己添加个JQ库就行了。样式自己调整。估计你样式问题

最近在做一个H5的改版项目，产品和设计给出的效果中有一个拖动滑块可以改变输入值的效果，类似如下图这样：

原文地址 http://www.cnblogs.com/tnnyang/p/7073723.html

这种需求写css即可，滚动条也有样式的，其名称为::-webkit-scrollbar、::-webkit-scrollbar-thumb、::-webkit-scrollbar-corner等。

-----------------------------------------------------------------------------

题外话，模拟计算滑块的属性。

var thumb_height = $(window).height()/document.body.clientHeight*$(window).height()

var thumb_top = document.body.scrollTop/document.body.clientHeight*$(window).height()

对应滑块的height和top样式。