CODEWITHSUNDEEP
htmlcsstabs
jajaja
jajaja

Reputation: 23

Normal code works abnormally inside CSS tab

I was making guest page code for my blog :

 <div class="guest_tistory_write">
        <s_guest_input_form>
            <div class="g_write">
                <s_guest_member>
                    <s_guest_form>
                    <div class="write_input_info">
                        <input type="text" name="[##_guest_input_name_##]" value="[##_guest_name_##]" placeholder="이름" />
                        <input type="text" name="[##_guest_input_password_##]" value="[##_guest_password_##]" maxlength="8" placeholder="비밀번호" />
                        <input type="text" name="[##_guest_input_homepage_##]" value="[##_guest_homepage_##]" placeholder="홈페이지" />
                    </div>
                    </s_guest_form>
                </s_guest_member>
                <div class="write_input_cont">
                <textarea name="[##_guest_textarea_body_##]" cols="50" rows="6"></textarea>
                <input type="submit" value="올리기" onclick="[##_guest_onclick_submit_##]" />
                </div>
            </div>
        </s_guest_input_form>
   </div>

It work normally : http://jsfiddle.net/o3omng/3bzgb/ (s_something tag is substitution tag.)

But if this code goes into tabs which made with CSS, Then It makes problem.

<div id="guest_tabs">
        <!-- 라디오 -->
        <input type="radio" id="tab1" name="tab" checked="checked" />
        <input type="radio" id="tab2" name="tab" />
        <!-- 라벨 -->
        <label for="tab1">소셜 방명록</label>
        <label for="tab2">티스토리 방명록</label>
        <!-- 각 탭 내용 -->
        <div class="guest_tab1">
            <!-- 소셜 방명록 -->
            <p>여기에 소셜 방명록 코드를 붙여넣어 주세요.</p>
        </div>
        <div class="guest_tab2">
            <!-- 티스토리 방명록 -->
            <div class="guest_tistory">

                <!-- The code that I show you first. -->

                <div class="guest_tistory_list">    
                </div>
            </div>
        </div>
    </div>

Like this : http://jsfiddle.net/o3omng/hqsX9/

The code must show me five inputs like first code, but second code shows just two inputs.

Upvotes: 1

Views: 48

Answers (2)

Victor H
Victor H

Reputation: 96

New Css work for you:

#guest_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#guest_tabs input:nth-of-type(2) ~ div:nth-of-type(2) { display : none ; } 
#guest_tabs input:nth-of-type(1):checked ~ div:nth-of-type(1),
#guest_tabs input:nth-of-type(2):checked ~ div:nth-of-type(2) { display : block ; }

Check here: http://jsfiddle.net/hqsX9/2/

Upvotes: 0

Tom
Tom

Reputation: 17577

Your second example hides every input element, because you told the browser to do that:

#guest_tabs input:nth-of-type(1),
#guest_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#guest_tabs input:nth-of-type(2),
#guest_tabs input:nth-of-type(2) ~ div:nth-of-type(2) {
    display : none ;
}

You tell him here to hide the radio buttons, so there is no way to switch the tabs. Change your CSS to look like this and check if the results matches your expectations:

#guest_tabs input:nth-of-type(1) ~ div:nth-of-type(1),
#guest_tabs input:nth-of-type(2) ~ div:nth-of-type(2) {
    display : none ;
}

Upvotes: 2

Related Questions