整整一天都浪费在这两个js上了
也算总结了几个知识点
1. .index和.html的使用区别
（1） .index用于给相同标签一个数值、
（2） .html用于输出标签中的文本数值
2. function的使用
（1） 可以加在head标签中，但是要在jq前面 加上$(function() {//执行内容} ，该段代码的含义为在页面加在之后进行查找页面标签。
（2） 也可以用script加在页面尾部，也可以$(//执行内容)直接进行填写
3. .siblings的使用
（1） 修改同胞元素中其他的标签样式
（2） 通常后面会跟一个 .addClass or .css
4. .eq的使用
（1）进行元素匹配 今天用于变量中的字符来修改其他css样式
5. .console.log使用
（1）多用于输出页面的变量
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$("#tabs ul li").click(function() { // 每个li的点击触发事件
$(this).css(‘color‘, ‘red‘).siblings(‘li‘).css(‘color‘, ‘blue‘); // 点击完成切换css样式
var tabss = $(this).index();// #tabs 每行数组一个和下面 #tabs_com对应的数值
$("#tabs_com ul li").eq(tabss).css(‘display‘, ‘block‘).siblings(‘li‘).css(‘display‘, ‘none‘);// eq方法对应数值的css显示隐藏
});
$(‘#tabs ul li‘).eq(0).click();//页面载入的时候默认点击一次0号数值
})
// siblings 使用方法. 修改同胞元素以外的内容
// var tabss = $("id").index() 定义变量tabss的数值 index值从0开始
// eq 方法 选取指定带有index值的元素
</script>
<style>
#tabs_com ul li {
display: none;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>aaaa</li>
<li>ssss</li>
<li>dddd</li>
<li>cccc</li>
</ul>
</div>
<div id="tabs_com">
<ul>
<li>aaaa的内容</li>
<li>ssss的内容</li>
<li>dddd的内容</li>
<li>cccc的内容</li>
</ul>
</div>
</body>
</html>
辛苦了Hook_LiFe 我不是不用心也不是不能吃苦 可能我大概真的脑子有些问题吧 走一步算一步 慢慢来。
原文：http://www.cnblogs.com/Yukiq/p/4839838.html