jq功能选项卡

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能选项卡title>
    <script src="jquery-1.8.3.min.js">script>
    <style>
        .nr2{ width:100%; max-width:300px; padding-top:20px; background:#C89DD1; padding-bottom:20px;  margin-top:-62px; height:100%;float: right;}
        .nr2 ul li{cursor: pointer; text-align:center; height:92px; padding-top:20px;float: unset;}
        .nr2 ul li:hover{ text-align:center; height:92px; padding-top:20px; background:  left 52px #74599E; padding-left:90px;}
        .nr2 ul li.on{ text-align:center; height:92px; padding-top:20px; background:left 52px #74599E; padding-left:90px;}
        .nr3{ float:right; margin-right:36px; padding-top:20px;}
        .nr3 div{ font-size:16px; color:#333333; line-height:30px; text-align:right;display: none;}
        .nr3 div:first-child{display: block;}
    style>
head>
<body>
    <div class="fr wow slideInRight" data-wow-offset="1"  data-wow-iteration="1">
        <div class="nr2">
            <ul>
                <li class="on">
                    <p>临床专长p>
                li>
                <li>
                    <p>研究方向p>
                li>
                <li>
                    <p>其他兼职p>
                li>
                <li>
                    <p>主要经历p>
                li>
                <li>
                    <p>所获奖励p>
                li>
                <li>
                    <p>主要贡献p>
                li>
            ul>
        div>
        <div class="nr3">
            <div>临床专长div>
            <div>研究方向div>
            <div>其他兼职div>
            <div>主要经历div>
            <div>所获奖励div>
            <div>主要贡献div>
        div>
    div>
body>
<script>
    $(".nr2 li").click(function(){
        //.index()方法获取元素下标,从0开始,赋值给某个变量
        key = $(this).index();
        //让内容框的第 _index 个显示出来,其他的被隐藏
        $(".nr3 > div").eq(key).show().siblings().hide();
        //改变选中时候的选项框的样式,移除其他几个选项的样式
        $(this).addClass("on").siblings().removeClass("on");
    });
script>
html>

 

你可能感兴趣的:(jq功能选项卡)