html
<ul>
<li class="active">酒店</li>
<li>机票</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ol>
css
* {
padding: 0;
margin: 0;
list-style: none;
}
ul {
width: 70px;
height: 350px;
float: left;
}
ul li {
width: 70px;
height: 50px;
border: solid 1px blue;
box-sizing: border-box;
}
ol {
float: left;
height: 350px;
width: 470px;
border: 1px solid #ccc;
}
ol li {
height: 350px;
width: 470px;
border: 1px solid #ccc;
display: none
}
//第一种方法加一个class名为active
ul .active {
background: yellow;
}
ol .active {
display: block;
}
js
第一种方法
$("ul li").click(function () {
var index = $(this).index();
// console.log(index)
$("ul li").removeClass("active");
$(this).addClass('active')
$("ol li").removeClass("active");
$("ol li").eq(index).addClass("active");
// $(this).addClass('active')
// console.log($(this))
})
第二种方法
$("ul li").click(function () {
var ind = $(this).index();
// console.log(index)
$("ul li").not(ind).css('background-color', 'white'); //给其他都设为初始的背景颜色
$("ul li").eq(ind).css('background-color', 'red');//给点击的那个设为红色背景
$("ol li").not(ind).hide()
$("ol li").eq(ind).show();
// $(this).addClass('active')
// console.log($(this))
})
