communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - 引入bootstap文件后，JS冲突，样式丢失
PHPz
PHPz 2017-04-11 12:55:33
0
1
361

因为网站的导航是用bootstrap做的，所有网页其他内容要适配boostrap文件，但是发现在引入 bootstrap.min.css 后网页出现2个错误：
第一：三个部分的选项卡在切换后没有数据
第二：【论坛新贴】模块中标题下方的文字不见了

打包文件下载地址：http://pan.baidu.com/s/1pKDVoj5

错误展示：

html代码部分

<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> -->
<link href="css/test11.css"  rel="stylesheet"  type="text/css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/index_tab.js" type="text/javascript"></script>
</head>

<body>
  <!--菜单栏-->
    <p class="nav"></p>

      <!--第一屏-->
    <p class="header">
         <p id="demo3" class="header_left slideBox fl" style="width: 604px; height: 300px;">
              <p class="nums" style=""><a href="javascript:void(0)" class="" style="border-radius: 10px;">bb</a><a href="javascript:void(0)" style="border-radius: 10px;" class="">cc</a><a href="javascript:void(0)" style="border-radius: 10px;" class="active">dd</a><a href="javascript:void(0)" style="border-radius: 10px;" class="">aa</a></p>

            <ul class="items">
                  <li  class="active"><a href="javascript:void(0)" title="这里是测试标题一这里是测试标题一这里是测试标题一这里是测试标题一这里是测试标题一lala"><img src="images/banner01.jpg"></a></li>
                  <li ><a href="javascript:void(0)" title="这里是测试标题二"><img src="images/banner02.jpg"></a></li>
                  <li><a href="javascript:void(0)" title="这里是测试标题三"><img src="images/banner03.jpg"></a></li>
                  <li ><a href="javascript:void(0)" title="这里是测试标题四"><img src="images/banner04.jpg"></a>
                  </li>
            </ul>

        <p class="tips">
          <p class="title"><a href="javascript:void(0)">aa</a></p>
        </p>
       </p>

<!--新闻选项卡菜单-->
<p class="tab bb fr">
    <p class="tab_menu">
        <ul>
            <li class="">最新资讯</li>
            <li class="">热门资讯</li>
            <li class="selected">热门问答</li>
        </ul>
    </p>

<!--选项卡1-->
<p class="tab_box ">
  <p style="display: none;">

        <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>

         <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
  <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>

         <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
          <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>

         <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
          <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>

         <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
          <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
</p>

<!--选项卡2-->
<p class="hide" style="display: none;">
  <p>
     <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
 <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
  </p>
</p>
<!--选项卡3-->
<p class="hide" style="display: block;">
  <p>
     <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
 <p class="one">
            <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
          <p class="tab_box_title">
                <a href="javascript:void(0)" class="tab_box_mulu">分类类目</a>
                <span>|</span>
                <a href="javascript:void(0)">11这是资讯的内容标题这是这是资讯的</a>
            </p>
            <p class="tab_box_time">2016-06-09</p>
        </p>
  </p>
</p>
</p>
</p>
<!--瀑布流-->
<p class="main center">
    <p class="main_left fl">
  <p class="tab2_menu">
          <p class="main_left_top_title">
              <a href="javascript:void(0)" class="active">论坛新贴</a>
              <a href="javascript:void(0)">论坛热贴</a>
          </p>
     </p>
     <p class="tab2_box">
     <p class="two">
        <p class="cell item">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tbody>
                    <tr>
                      <td width="50" valign="top" align="center">
                        <a href="/member/keikeizhang">
                          <img src="images/touxiang48X48.jpg" class="avatar" border="0" align="default">
                        </a>
                      </td>
                      <td width="10"></td>

                      <td width="auto" valign="middle"><span class="item_title"><a href="/t/305959javascript:void(0)reply10">怎么感觉现在的技术社区的氛围有点气氛不对呢？</a></span>
                      <p class="sep5"></p>
                      <span class="small fade"><p class="votes"></p><a class="node" href="/go/programmer">交易合规</a> &nbsp;•&nbsp; <strong><a href="/member/keikeizhang">keikeizhang</a></strong> &nbsp;•&nbsp; 09-08 13:10 &nbsp;•&nbsp; 最后回复来自 <strong><a href="/member/yidongjun">易董君</a></strong></span>
                      </td>
                      <td width="70" align="right" valign="middle">

                          <a href="/t/305959javascript:void(0)reply10" class="count_livid">10</a>
                      </td>
                    </tr>
                  </tbody>
             </table>
        </p>
           <p class="cell item">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tbody>
                    <tr>
                      <td width="50" valign="top" align="center">
                        <a href="/member/keikeizhang">
                          <img src="images/touxiang48X48.jpg" class="avatar" border="0" align="default">
                        </a>
                      </td>
                      <td width="10"></td>

                      <td width="auto" valign="middle"><span class="item_title"><a href="/t/305959javascript:void(0)reply10">怎么感觉现在的技术社区的氛围有点气氛不对呢？</a></span>
                      <p class="sep5"></p>
                      <span class="small fade"><p class="votes"></p><a class="node" href="/go/programmer">交易合规</a> &nbsp;•&nbsp; <strong><a href="/member/keikeizhang">keikeizhang</a></strong> &nbsp;•&nbsp; 09-08 13:10 &nbsp;•&nbsp; 最后回复来自 <strong><a href="/member/yidongjun">易董君</a></strong></span>
                      </td>
                      <td width="70" align="right" valign="middle">

                          <a href="/t/305959javascript:void(0)reply10" class="count_livid">10</a>
                      </td>
                    </tr>
                  </tbody>
             </table>
        </p>
     </p>
      <p class="two hide" >
        <p class="cell item">
            <table cellpadding="0" cellspacing="0" border="0" width="100%">
                  <tbody>
                    <tr>
                      <td width="50" valign="top" align="center">
                        <a href="/member/keikeizhang">
                          <img src="images/touxiang48X48.jpg" class="avatar" border="0" align="default">
                        </a>
                      </td>
                      <td width="10"></td>

                      <td width="auto" valign="middle"><span class="item_title"><a href="/t/305959javascript:void(0)reply10">22怎么感觉现在的技术社区的氛围有点气氛不对呢？</a></span>
                      <p class="sep5"></p>
                      <span class="small fade"><p class="votes"></p><a class="node" href="/go/programmer">交易合规</a> &nbsp;•&nbsp; <strong><a href="/member/keikeizhang">keikeizhang</a></strong> &nbsp;•&nbsp; 09-08 13:10 &nbsp;•&nbsp; 最后回复来自 <strong><a href="/member/yidongjun">易董君</a></strong></span>
                      </td>
                      <td width="70" align="right" valign="middle">

                          <a href="/t/305959javascript:void(0)reply10" class="count_livid">10</a>
                      </td>
                    </tr>
                  </tbody>
             </table>
        </p>
      </p>
    </p>
 </p>
    <p class="main_right fr">

<!--排行榜-->
<p class="rank">
    <p class="tab_rank_title">
      <ul>
        <li>达人榜</li>
        <li class="active_top">个人</li>
        <li>机构</li>
      </ul>
    </p>

    <p class="tab_rank_box">
        <p class="three">
            <ul>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>78787887</p>
                  </a>
                </li>

                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>赵四</p>
                  </a>
                </li>

                  <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>我的名字是小明</p>
                  </a>
                </li>
             </ul>
             <ul>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>5656446565</p>
                  </a>
                </li>

                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>这是我的用户名</p>
                  </a>
                </li>

                  <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan</p>
                  </a>
                </li>
             </ul>
             <ul>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan</p>
                  </a>
                </li>

                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan</p>
                  </a>
                </li>

                  <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan</p>
                  </a>
                </li>
             </ul>
          </p>

          <p class="three hide">
            <ul>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan zhang</p>
                  </a>
                </li>

                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan zhang</p>
                  </a>
                </li>
                <li>
                  <a href="javascript:void(0)">
                    <img src="images/banner01.jpg">
                    <p>yinan zhang</p>
                  </a>
                </li>
             </ul>
          </p>
     </p>
</p>
 </p>
</p>
</body></html>

CSS 部分


*{box-sizing: content-box;}
.nav{height:55px; width:100%; background: #666;}

.header{
    background: #fff;
    width:1160px;
    height:310px;
    margin: 25px auto;
    padding:20px;
}

.header_left{
width:604px;
 height:300px;
 overflow: hidden;
}



.header_left ul li{
    width:604px;
    position: relative;
    float: left;
    border:0px solid red;
}

.header_left ul li img{
   display: block;
}

.header_left span{
    display: block;
    width:600px;
    height:40px;
    position: absolute;
    bottom: 0;
    opacity: 0.5;
    color:#fff;
    line-height: 40px;
    text-indent:20px;
}

.header_right{
    width: 540px;
    height: 285px;
}

.nav_wrap{
    border-bottom: 1px solid #ccc;
    height: 40px;
}


.nav_wrap  li{float: left;width:75px;margin-right: 15px;/* height: 45px; */text-align: center;color:#333;padding-bottom: 10px;}


.nav_wrap li a{
   /* line-height: 40px;*/
}


.nav_wrap li a:hover {
    border-bottom: 2px solid #235590;
    color:#235590 !important;
    font-weight: 500;
    padding-bottom: 19px;
}


.header_news{
   margin-top: 8px;
    font-size: 16px;
   color:#333;
   line-height: 25px;
   width:540px;
}

.header_one{
 line-height: 27px;
}
.header_title{
    width:430px;
    float: left;
    overflow: hidden;
    height:22px;
    font-size: 14px;
}
.header_title span{
   padding:0 4px;
}

.title_color{
    color:#235590;
}
.title_color:hover{text-decoration:underline;}

.header_time{
   font-size: 10px;
   color:#999;
    width:90px;
    display:  inline-block;
    float:left;
    padding-left: 20px;
}



.line_active a{
    border-bottom: 2px solid #235590;
    color:#235590 !important;
    font-weight: 500;
    padding-bottom: 15px;
}


.main{width: 1200px; margin:0 auto; }
.main_left{width:818px;background: #fff;}
.main_left_top{height:50px; border-bottom: 1px solid #e3e3e3; line-height: 50px; }
.main_left_top_title{ margin-left: 27px;}
.main_left_top_title a{ display: block; float: left; margin-right: 40px; color: #525252;}
.main_left_top_title a .active{border-bottom: 2px solid #225599; }

.main_right{width:350px;}

/*论坛新贴+热贴*/
.cell {
    padding: 10px;
    font-size: 12px;
    line-height: 120%;
    text-align: left;
    border-bottom: 1px solid #e2e2e2;
}
.active{border-bottom: 2px solid #225599;color:#225599 !important;}
.main_left_top_title{text-align: center;}
.tab2_menu{width:790px; border-bottom:1px solid #e3e3e3;overflow: hidden;}
.tab2_menu a{font-size: 16px;padding: 20px 0px 17px 0;text-align: center;display: block;}


/*列表信息内容*/
table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: grey;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

a:link, a:visited, a:active {
    color: #778087;
    text-decoration: none;
    word-break: break-all;
}

.item_title {
    font-size: 16px;
    line-height: 130%;
    text-shadow: 0px 1px 0px #fff;
    word-wrap: break-word;
    hyphens: auto;
}
.sep5 {
    height: 5px;
}

.small {
    font-size: 11px;
}

.fade {
    color: #ccc;
}

a.count_livid:link, a.count_livid:active {
    line-height: 12px;
    font-weight: bold;
    color: white;
    background-color: #aab0c6;
    display: inline-block;
    padding: 2px 10px 2px 10px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    text-decoration: none;
    margin-right: 5px;
    word-break: keep-all;
}

img.avatar {
    -moz-border-radius: 4px;
    border-radius: 4px;
}


a.node:link, a.node:visited, a.node:active {
    background-color: #f5f5f5;
    font-size: 10px;
    line-height: 10px;
    display: inline-block;
    padding: 4px 4px 4px 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-decoration: none;
    color: #999;
}



.wq-box{padding:12px 12px; margin-bottom:32px; background-color: #fff;}
.wq-box li{padding:10px 0px;}
h3{ font-size: 16px; color: #030303; padding:0 0 15px 12px; border-bottom: 1px solid #e3e3e3;}
.ico-dot1 {
    width: 6px;
    height: 6px;
    display: inline-block;
    background: url(../images/index_icon.png);
    background-position: 0px 0px;
    margin-right: 10px;
    vertical-align: middle;
}

.ico-dot2 {
    width: 15px;
    height: 12px;
    display: inline-block;
    background: url(../images/index_icon.png);
    background-position: 0px -8px;
    vertical-align: middle;
    margin-right: 2px;
}

.ico-dot3 {
    width: 15px;
    height: 12px;
    display: inline-block;
    background: url(../images/index_icon.png);
    background-position: 0px -20px;
    vertical-align: middle;
    margin-right: 2px;
}

li .text{font-size: 14px; color:#141717;width: 314px; display: inline-block;line-height: 1.5em;}
li .text{text-indent: 1;}
li .bark{ font-size: 12px; color:#a8a8a8;}



.text2  a {
    display: block;
    overflow: hidden;
    position: relative;
    font-size: 14px;
    color: #141717;
    line-height: 1.5em;
    vertical-align: middle;
}


.text2 td:first-child{
    font-size:24px;
    color:#fa4702;
}

.text2 img{
    display: block;
    margin: 0 auto;
}

/*等您参与*/
.tp{ width: 296px ; height: 120px; margin: 0 auto; position: relative;}

.huodong{position: absolute;top:0;left:0;padding-top:30px; text-align: center;}

.huodong h5{color: #fff;width:296px;font-size: 18px;top:40px; text-shadow: 1px 1px 1px rgba(0,0,0,.6);text-align: center; font-weight:550;}
.huodong .btn{background-color:#017be3; padding: 8px 14px;font-size: 14px;color:#fff; border-radius: 4px;    top: 60px;
left: 30%;
position: absolute;}

/*分类目录*/
.list{ background-color:#fff; height: 231px;}
.list a{margin:8px 15px;padding:8px 18px; float: left; background:#f5f5f6;font-size: 15px;}

/*达人榜*/
.rank{width: 353px;background-color: #fff;overflow: hidden;margin-bottom: 32px;}
.tab_rank_title{background-color: #f0f7fc;font-size: 16px;overflow:hidden;}
.tab_rank_title ul{}
.tab_rank_title ul li{width: 25%; float: left; text-align: center;padding: 23px 0;cursor: pointer;}

.tab_rank_title ul li:first-child{width: 50%;}
.active_top{background-color: #fff;border-top:2px solid #0078d1;}

.tab_rank_box{background: #fff;overflow: hidden;}
.three{font-size: 16px;padding:18px 19px;}
.three li{float: left; overflow: hidden;width:85px;text-align: center;}
.three li:nth-child(2n+0){padding:0 30px;}
.three li img{width: 65px; height: 65px; border-radius: 5px;magin-left:10px;}
.three li p{font-size: 14px;white-space:nowrap;
    text-overflow: ellipsis;padding: 16px 0;width:80px; text-align: center;white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;}

*{padding:0; margin: 0;}
body{
    background: #f6f6f8 !important;
    font-size:16px;
    font-family: "Microsoft Yahei" !important,'Helvetica Neue',Helvetica,Arial,sans-serif;

}
.fl{float:left;}
.fr{float:right;}

li{ list-style-type: none;}
a{text-decoration: none; color:#333;}
a:hover{color:#235590;}

.hidden{display: none;}


    *{ margin:0; padding:0;}
    a{text-decoration:none; color:#333;}
     li{list-style-type: none;}
     body { font:14px/19px "微软雅黑",Arial, Helvetica, sans-serif; color:#666;}
.tab.bb {
    width: 540px;
    padding-top: 10px;
}
a.tab_box_mulu {
    color: #235590;
}
 .tab_menu {border-bottom: 1px solid #ccc;height: 40px;  width:540px;}
     .tab_menu li {float: left;text-align: center;color: #333;cursor: pointer;
      margin-right: 50px; padding-bottom:20px;font-weight:500;font-size: 16px;}
     .tab_menu li.hover { color:#235590; border-bottom:2px solid #235590;}
     .tab_menu li.selected {color:#235590; border-bottom:2px solid #235590;}
     .tab_box { clear:both;margin:10px 0;    height:240px;
    overflow: hidden;}
     .hide{display:none}


    .tab_box_title{width: 430px;
    width: 430px;
    float: left;
    overflow: hidden;
    height: 22px;
    font-size: 15px;
    font-family: "微软雅黑";
}

}}
   .tab_box_mulu a{color:#235590  !important;}
    .tab_box_title span{padding: 0 4px;}
    .tab_box_time{float:right;font-size: 10px;
        color: #999;
        width: 90px;
        display: inline-block;
        float: left;
        padding-left: 20px;}

    .one{width:540px; overflow:hidden; margin: 4px 0;}

JS部分


 $(function(){
        var $p_li =$("p.tab_menu ul li");
        $p_li.mouseover(function(){
            $(this).addClass("selected")            //当前<li>元素高亮
                   .siblings().removeClass("selected");  //去掉其它同辈<li>元素的高亮
            var index =  $p_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
            $("p.tab_box > p")
            //选取子节点。不选取子节点的话，会引起错误。如果里面还有p
                    .eq(index).show()   //显示 <li>元素对应的<p>元素
                    .siblings().hide(); //隐藏其它几个同辈的<p>元素
        })

//论坛热贴模块
         var $m_title_a =$(".main_left_top_title a");
        $m_title_a.click(function(){
            $(this).addClass("active")            //当前<li>元素高亮
                   .siblings().removeClass("active");  //去掉其它同辈<li>元素的高亮
            var index2 =  $m_title_a.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
            $(".tab2_box > p")
            //选取子节点。不选取子节点的话，会引起错误。如果里面还有p
                    .eq(index2).show()   //显示 <li>元素对应的<p>元素
                    .siblings().hide(); //隐藏其它几个同辈的<p>元素
        })

//达人榜模块
var $t_rank_title =$(".tab_rank_title li:gt(0)");
        $t_rank_title.click(function(){
            $(this).addClass("active_top")            //当前<li>元素高亮
                   .siblings().removeClass("active_top");  //去掉其它同辈<li>元素的高亮
            var index3 =  $t_rank_title.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。

            $(".tab_rank_box > p")
            //选取子节点。不选取子节点的话，会引起错误。如果里面还有p
                    .eq(index3).show()   //显示 <li>元素对应的<p>元素
                    .siblings().hide(); //隐藏其它几个同辈的<p>元素
        })


    })
//]]>
PHPz
PHPz

学习是最好的投资！

répondre à tous(1)
Peter_Zhu
Peter_Zhu2017-04-11 12:57:33 1 plancher

总体都看了下 你的代码太乱了 你html页面甚至都缺标签 第一个切换的内容都没有闭合

1.关于你切换没有数据是因为样式控制了JS也有问题 把那个hide样式去掉

var listli = $(".tab_menu ul li");
var checkbox = $(".checkbox");    
listli.each(function(index){            
  $(this).hover(function(){
    $(this).addClass("selected").siblings().removeClass("selected");
    
    checkbox.eq(index).show().siblings(".checkbox").hide();
  });
});

这个是我帮你重写的，给你的每个选项卡上都加一个checkbox样式，然后检查下你的标签闭合

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal