30 要求将图中js部分实现 悬赏已过期

发布于 2020-09-10 14:13:24

QQ截图20200910141249.png
说明:点击上部右侧select可以切换版本,并且下部会对应显示版本地址,并且有几个平台就同时显示,用上部左侧选项卡进行切换选择平台。

复制代码功能不用写了。

查看更多

关注者
0
被浏览
66
1 个回答
lovy
lovy 2 days ago

<style>
.header{

 display: flex;

}
.js-tab {

display: flex;

}
.active {

background: red;
color: white;

}
.js-tab>div {

border: 1px solid red;
padding: 5px 15px;

}
</style>
<div class="header">

<div class="js-tab">
    <div>选项卡1</div>
    <div>选项卡2</div>
    <div>选项卡3</div>
</div>
<select class="js-select">
      <option value ="版本1">版本1</option>
      <option value ="版本2">版本2</option>
      <option value="版本3">版本3</option>
      <option value="版本4">版本4</option>
</select>

</div>
<div class="js-tab-content">

<div>选项卡内容1</div>
<div style="display:none">选项卡内容2</div>
<div style="display:none">选项卡内容3</div>

</div>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js";></script>
<script>


$('.js-tab>div').click(function(){
   let index = $(this).index();
   $('.js-tab>div').removeClass('active').eq(index).addClass('active');
   $('.js-tab-content>div').hide().eq(index).show();
})
$('.js-select').change(function(){
    $('.js-tab-content>div').html($(this).val())

})
</script>

点击右上侧的select可以切换版本,并且下部会显示对应select里面的版本内容,有几个tab内容平台就会同时替换,切换时会显示对应的select地址
对应的css html js都在上面代码里面,期待您的采纳

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览