Difference between revisions of "Team:SJTU-BioX-Shanghai/HP/Gold Integrated-cn"

Line 29: Line 29:
 
         .nav2-brand {
 
         .nav2-brand {
 
             width: 9.5em;
 
             width: 9.5em;
 +
        }
 +
 +
      .we {
 +
            display: block;
 +
        }
 +
       
 +
        .they {
 +
            display: none;
 +
        }
 +
       
 +
        .btn-group-xlg>.btn {
 +
            padding: 1rem 2rem;
 +
            font-size: 1.6rem;
 +
            border-radius: 3rem;
 +
            font-family: "Raleway";
 +
        }
 +
       
 +
        @media only screen and (max-width: 768px) {
 +
            .btn-group-xlg>.btn {
 +
                padding: 1rem 2rem;
 +
                font-size: 1.4rem;
 +
                border-radius: 3rem;
 +
            }
 +
        }
 +
       
 +
        @media only screen and (max-width: 576px) {
 +
            .btn-group-xlg>.btn {
 +
                padding: 0.75rem 1.5rem;
 +
                font-size: 1.25rem;
 +
            }
 +
        }
 +
       
 +
        .choosebox {
 +
            text-align: center;
 +
            padding-top: 3rem;
 
         }
 
         }
 
     </style>
 
     </style>
Line 95: Line 130:
 
         </div>
 
         </div>
 
         <div class="big-head h1-my-responsive">社会交互</div>
 
         <div class="big-head h1-my-responsive">社会交互</div>
 +
        <div class="choosebox">
 +
            <div class="btn-group btn-group-xlg" role="group">
 +
                <button type="button" class="btn btn-info active" id="we_btn" aria-pressed="true" data-state="0">&nbsp;We&nbsp;</button>
 +
                <button type="button" class="btn btn-info" id="they_btn" aria-pressed="false" data-state="0">They</button>
 +
            </div>
 +
        </div>
 
         <div class="container maink">
 
         <div class="container maink">
 
             <div class="container maintext">
 
             <div class="container maintext">
 
                 <div class="row">
 
                 <div class="row">
 
                     <div class="scrcol col-lg-3">
 
                     <div class="scrcol col-lg-3">
−
                         <div class="scroll-box grey lighten-5">
+
                         <div class="scroll-box grey lighten-5 " id="navbar-left">
−
                             <nav class="list-unstyled" id="navbar-left" role="navigation">
+
                             <div class="we">
 +
                                <nav class="list-unstyled" role="navigation">
  
−
                                <li class="nav-item">
+
                                    <li class="nav-item">
−
                                     <a class="nav-link" href="#section1">标题1</a>
+
                                        <a class="nav-link" href="#section01">Title One</a>
−
                                </li>
+
                                     </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section02">Title Two</a>
 +
                                    </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section03">Title Three</a>
 +
                                    </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section04">Title Four</a>
 +
                                    </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section05">Title Five</a>
 +
                                    </li>
 +
                                </nav>
 +
                            </div>
 +
                            <div class="they">
 +
                                <nav class="list-unstyled" id="navbar-left2" role="navigation">
  
−
                            </nav>
+
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section11">Title One</a>
 +
                                    </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section12">Title Two</a>
 +
                                    </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section13">Title Three</a>
 +
                                    </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section14">Title Four</a>
 +
                                    </li>
 +
                                    <li class="nav-item">
 +
                                        <a class="nav-link" href="#section15">Title Five</a>
 +
                                    </li>
 +
                                </nav>
 +
                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                     <div class="col-12 col-lg-9">
 
                     <div class="col-12 col-lg-9">
−
                         <div class="my-title h5-my-responsive" id="section1">标题1</div>
+
                         <div class="we">
−
                        <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
+
                            <div class="my-title h5-my-responsive" id="section01">Title One (WE)</div>
−
                         <p>巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉</p>
+
                            <p>Something something something something something something something something something</p>
−
                          
+
 
 +
                            <div class="my-title h5-my-responsive" id="section02">Title Two</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section03">Title Three</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section04">Title Four</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section05">Title Five</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                         </div>
 +
                        <div class="they">
 +
                            <div class="my-title h5-my-responsive" id="section11">Title One (They)</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section12">Title Two</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section13">Title Three</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section14">Title Four</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                            <div class="my-title h5-my-responsive" id="section15">Title Five</div>
 +
                            <p>Something something something something something something something something something</p>
 +
 
 +
                         </div>
 
                     </div>
 
                     </div>
  
Line 192: Line 296:
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/nav?
 
         <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/nav?
 
         action=raw&ctype=text/javascript"></script>
 
         action=raw&ctype=text/javascript"></script>
 +
<script>
 +
            $(document).ready(function() {
 +
 +
                $("#we_btn").click(function() {
 +
                    $(".they").slideUp("slow", function() {
 +
                        $(".we").slideDown("slow");
 +
                    });
 +
                    $("#we_btn").addClass('active');
 +
                    $("#they_btn").removeClass('active');
 +
                    refresh_t();
 +
 +
 +
                });
 +
                $("#they_btn").click(function() {
 +
                    $(".we").slideUp("slow", function() {
 +
                        $(".they").slideDown("slow");
 +
                    });
 +
                    $("#they_btn").addClass('active');
 +
                    $("#we_btn").removeClass('active');
 +
                    refresh_t();
 +
 +
 +
                });
 +
            });
 +
 +
            function refresh_t() {
 +
                scrbox = $('.scroll-box');
 +
                mbox = $(".mainbox");
 +
                mk = $(".maink");
 +
                refreshscrollbox();
 +
            }
 +
        </script>
  
 
     </div>
 
     </div>

Revision as of 15:56, 1 November 2017

社会交互
Title One (WE)

Something something something something something something something something something

Title Two

Something something something something something something something something something

Title Three

Something something something something something something something something something

Title Four

Something something something something something something something something something

Title Five

Something something something something something something something something something

Title One (They)

Something something something something something something something something something

Title Two

Something something something something something something something something something

Title Three

Something something something something something something something something something

Title Four

Something something something something something something something something something

Title Five

Something something something something something something something something something

社会实践
概述
社会实践
科普推广