动态右窗格样式问题

Dynamic right pane styling issue

本文关键字：样式 问题 动态      更新时间：2023-09-26

我有右边的子菜单作为窗格。当点击2链接在第一个div, 2div必须显示。当点击第二(或任何元素)元素从第二div第三div必须显示我尝试了这样的东西(截至目前所有div都是display:block)

<html>
    <head>
        <style>
        
        </style>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    
        <style>
        .my_class {
             height:200px;
             width:100px;
             border:1px solid;
             float:left;
             position:absolute;
        }
        </style>
    
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-2">
                    <div class="my_class">
                        <ul>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                        </ul>
                        
                    </div>
                    <div class="my_class">
                        <p><a href="#">Something2</a></p>
                        <p><a href="#">Something2</a></p>
                        <p><a href="#">Something2</a></p>
                        <p><a href="#">Something2</a></p>
                        <p><a href="#">Something2</a></p>
                    </div>
                    <div class="my_class">
                        <p><a href="#">Something2-1</a></p>
                        <p><a href="#">Something2-1</a></p>
                        <p><a href="#">Something2-1</a></p>
                        <p><a href="#">Something2-1</a></p>
                        <p><a href="#">Something2-1</a></p>
                    </div>
                    <div class="my_class">
                        <p><a href="#">Something2-1-1</a></p>
                        <p><a href="#">Something2-1-1</a></p>
                        <p><a href="#">Something2-1-1</a></p>
                        <p><a href="#">Something2-1-1</a></p>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

有人能帮我纠正对齐问题吗?子菜单实际上向右移动了4次。

开始:
将class cl-xs-2更改为cl-md-3。
和删除position:absolute; and left:100%;display <-不需要那些东西。

注意我看到你重复的样式很多高度，宽度等
你可以为所有这些div设置一个类，并使用一个css规则为所有div设置属性。

看看这个，我刚找到它，但它似乎是一个不错的教程。

<html>
<head>
  <style>
  </style>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div style="height:200px;width:100px;border:1px solid;float:left;">
          <ul>
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
            <li><a href="#">3</a>
            </li>
            <li><a href="#">4</a>
            </li>
          </ul>
        </div>
        <div style="height:200px;width:100px;border:1px solid;float:left;">
          <p><a href="#">Something2</a>
          </p>
          <p><a href="#">Something2</a>
          </p>
          <p><a href="#">Something2</a>
          </p>
          <p><a href="#">Something2</a>
          </p>
          <p><a href="#">Something2</a>
          </p>
        </div>
        <div style="height:200px;width100px;border:1px solid;float:left;">
          <p><a href="#">Something2-1</a>
          </p>
          <p><a href="#">Something2-1</a>
          </p>
          <p><a href="#">Something2-1</a>
          </p>
          <p><a href="#">Something2-1</a>
          </p>
          <p><a href="#">Something2-1</a>
          </p>
        </div>
        <div style="height:200px;width100px;border:1px solid;float:left;">
          <p><a href="#">Something2-1-1</a>
          </p>
          <p><a href="#">Something2-1-1</a>
          </p>
          <p><a href="#">Something2-1-1</a>
          </p>
          <p><a href="#">Something2-1-1</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

相关文章：