消息关闭
    暂无新消息!
<div class="html">
    <div class="wrap">
        <div class="full">
            <div class="content-tab-box">
                <ul class="page-box">
                    <li class="roleRight animated">
                        <div id="pageTwo" class="pageWarp">
                            <div class="pro-system num-two">
                                <!--场景图-->
                                <div class="container">
                                    <div class="tab-system-wrapper">
                                    <!--tab section 1-->
                                        <input type="radio" name="tab-radio" class="tab-radio" id="tab-system-1" checked>
                                        <label for="tab-system-1" class="tab-title tab-handler-1"><i class="iconfont icon-Workonsite work-font"></i>Work onsite</label>
                                        <div class="tab-system-content tab-content-1">这里是默认显示的内容<div>
                                     <!--tab section 2-->
                                        <input type="radio" name="tab-radio" class="tab-radio" id="tab-system-2">
                                        <label for="tab-system-2" class="tab-title tab-handler-2"><i class="iconfont icon-Workincloud work-font"></i>Work in cloud</label>
                                         <div class="tab-system-content tab-content-2">
                                              <div class="systemup animated">
                                                  <img id="combination" src="img/cloud.png" style="width: 100%;" />
                                              </div>
                                          </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="roleRight animated"></li>
                    <li class="roleRight animated"></li>
                    <li class="roleRight animated"></li>
                </ul>
            </div>
        </div>
    </div>
</div>

默认进来后的显示效果应该是这样的:

现在却是这样,没有被选中的:

我查看过input的属性 :<input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>,为什么刷新之后,就不显示了呢?只有再点击label隐藏的内容才会显示?

我没有写js,都是css。

谢谢!


2个回答

︿ 2

感谢 djyuning :

 你说的对,是需要js控制的。
 
$(document).ready(function() {
    var checkedName = $('#tab-system-1');
    isChecked(checkedName);
}


function isChecked(name){
    var checkedTrue = name.checked ? true : false;
    if(checkedTrue == false){
        name.attr('checked','true');
    }else{
        name.attr('checked','false');
    }
}
︿ 0

没太理解你的HTML结构,在我认为,顶部的按钮和底部内容应该是平行的,你的却是垂直的。

另外,只要设置了相同的name一个,input:radio就是可以自动切换选中,你的脚本再更改选中就无意义了。

获取状态$(#selector)[0].checked,,注意这里的[0],需要把jQuery 对象转为Dom 对象读取属性!

是prop(name,bool),不要用attr!

说下解决方案,
首先,你需要为第一个input添加checked属性,让它在页面加载时就是存在选中状态的。
然后,你需要用js建立一个监听方法,该方法用于遍历所有的input状态。
接下来,你需要为input绑定change事件,值变化时再遍历一遍状态。
最后,如果你希望点击后,再次刷新页面仍然高亮在刚才点击的位置,那么你可能需要用到cookie插件了。
原理,页面加载完成,初始化遍历一遍,表单选中,再遍历一遍。