圆弧形内容切换

html:

<div class="box">
    <div class="yuan">
        <div class="yuan1">
            <p>1</p>
        </div>
        <div class="yuan2">
            <p>2</p>
        </div>
        <div class="yuan3">
            <p>3</p>
        </div>
        <ul>
            <li>内容1</li>
            <li>内容2</li>
            <li class="active">内容3</li>
        </ul>
    </div>
</div>

css:

.box {
  margin: 100px;
}
p {
  font-size: 20px;
  text-align: center;
  color: #fff;
  line-height: 40px;
}
.yuan {
   600px;
  height: 600px;
  border-radius: 50%;
  border-left: 2px solid #ccc;
  position: relative;
}
.yuan .yuan1 {
  position: absolute;
   40px;
  height: 40px;
  background: #ccc;
  border-radius: 50%;
  bottom: -20px;
  left: 50%;
  transform-origin: 20px -300px;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
}
.yuan .yuan1.active {
   80px;
  height: 80px;
  bottom: -40px;
  transform-origin: 40px -300px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}
.yuan .yuan1.active p {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
.yuan .yuan2 {
  position: absolute;
   40px;
  height: 40px;
  background: red;
  border-radius: 50%;
  top: -20px;
  left: 50%;
  transform-origin: 20px 320px;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
}
.yuan .yuan2.active {
   80px;
  height: 80px;
  top: -40px;
  transform-origin: 20px 360px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
.yuan .yuan2.active p {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}
.yuan .yuan3 {
  position: absolute;
   80px;
  height: 80px;
  background: blue;
  border-radius: 50%;
  bottom: 50%;
  left: -40px;
  transform-origin: 120px 0;
  transition: all 1s;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
}
.yuan .yuan3.active_b {
   40px;
  height: 40px;
  bottom: -20px;
  transform-origin: 180px -140px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
.yuan .yuan3.active_b p {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}
.yuan .yuan3.active_t {
   40px;
  height: 40px;
  bottom: 100%;
  transform-origin: 180px 200px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}
.yuan .yuan3.active_t p {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
}
ul {
  position: absolute;
   100%;
  left: 0;
  top: 200px;
}
ul li {
  padding-left: 200px;
  display: none;
  font-size: 20px;
}
ul li.active {
  display: block;
}
js:

$('.yuan1').mouseenter(function () {
    if($(this).hasClass('active')){
        $(this).removeClass('active');
        $('.yuan3').removeClass('active_b');
        $('ul li:nth-child(3)').addClass('active').siblings().removeClass('active');
    }else{
        $(this).addClass('active').siblings().removeClass('active');
        $('.yuan3').addClass('active_b').removeClass('active_t');
        $('ul li:nth-child(1)').addClass('active').siblings().removeClass('active');
    }
});
$('.yuan2').mouseenter(function () {
    if($(this).hasClass('active')){
        $(this).removeClass('active');
        $('.yuan3').removeClass('active_t');
        $('ul li:nth-child(3)').addClass('active').siblings().removeClass('active');
    }else{
        $(this).addClass('active').siblings().removeClass('active');;
        $('.yuan3').addClass('active_t').removeClass('active_b');
        $('ul li:nth-child(2)').addClass('active').siblings().removeClass('active');
    }
});