js实现点击某个div层置顶显示

JavaScript08

js实现点击某个div层置顶显示,第1张

如果点击某个div层置顶显示的话

需要用到Z-index 值

而使用zIndex值 就必须对元素进行绝对定位

可以用如下方法 让被点击的层置顶

//创建一个公共Z值

var z=999

//然后获取所有div

var aDiv=document.getElementsByTagName('div')

//遍历元素

for(var i=0i<aDiv.lengthi++){

//添加事件

aDiv[i].onclick=function(){

//控制当前点击的div每次点击就z++

//比如这次点击了z值到了1000

//然后下一个div点击的时候

//把这个值赋给他 然后他还++一次 变成1001

//这样那个又是最高的了

this.style.zIndex=z++

}

}

<html>

    <body>

        <ul>

            <li onclick="topLine(event)">111</li>

            <li onclick="topLine(event)">222</li>

            <li onclick="topLine(event)">333</li>

        </ul>

    </body>

</html>

<script type="text/javascript">

//思路：获取当前行，复制，删除，插入到第一行。

var topLine = function(event){

    event = event || window.event

    var t = event.currentTarget,$t = $(t)

    var html = t.outHTML

    $t.remove()

    $t.parent().find('li:first-child').before(html)

}

</script>

使用Jquery吧，希望可以帮到你：

<table id="tb1" style="width:200px">

<tr><td>1</td><td><a href="javascript:void(0)" onclick="SetTop(this)">置顶</a></td></tr>

<tr><td>2</td><td><a href="javascript:void(0)" onclick="SetTop(this)">置顶</a></td></tr>

<tr><td>3</td><td><a href="javascript:void(0)" onclick="SetTop(this)">置顶</a></td></tr>

<tr><td>4</td><td><a href="javascript:void(0)" onclick="SetTop(this)">置顶</a></td></tr>

<tr><td>5</td><td><a href="javascript:void(0)" onclick="SetTop(this)">置顶</a></td></tr>

</table>

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>

<script>

function SetTop(v){

var tr = $(v).parent("td").parent("tr")

$("#tb1").find("tr").first().before(tr)

}

</script>