jquery更改文本框内容效果实现

原创
2012/04/09 10:31
阅读数 1.6K

common.js:

$(function(){
    $('#menu').children('li').eq(0).addClass('add');
    $('#content').text($('#menu').children('li').eq(0).text());
    $('#menu li').click(function(){
        var index = $(this).index();
        var liValue = $(this).text();
        $('#menu li').removeClass('add');
        $(this).addClass('add');
        $('#content').text(liValue);
    })
})

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test jquery</title>
<script src='jquery.js'></script>
<script src='common.js'></script>
<style>
ul li{ list-style:none;float:left;margin-right:5px;border:1px solid #d4d4d4;width:50px;}
ul{ margin:0;padding:0;}
.cl{ clear:both;}
.add{ background:#d4d4d4;}
</style>
</head>
<body>
<ul id='menu'><li>1</li><li>2</li><li>3</li></ul>
<div class='cl'>
<textarea id='content'></textarea>
</div>
</body>
</html>

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部