Question

我试图建立一个导航菜单，其中一侧是男性，您点击某个区域（即头部），左侧显示最新产品，加上该部分的分解（剃须，剃须刀，胡须修饰等）

我的代码可以在这里看到：

<section class="wr-our-brand">
  <div class="container">
    <div class="containerright">  
      <div id="building">
        <img src="images/nav_text.png"  alt="" usemap="#map" style="padding-top:4em;">    
        <map id="map" name="map">
          <area class="link" shape="rect" alt="" title="" coords="69,3,127,31" data-val="one" target="" />
          <area class="link" shape="rect" alt="" title="" coords="138,182,232,256" data-val="two" target="" />
          <area class="link" shape="rect" alt="" title="" coords="53,313,170,339" data-val="three" target="" />
        </map>
      </div>
    </div>

    <div class="containerleft">    
      <div  id="menu">
        <h2>Hello and Welcome</h2>
        <p style="font-size:16px;">Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction. Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction.<br><br> Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction. Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction Informational introduction.<br>
        <p style="font-size:16px;"><br>To view our wide range of products please select an area on the male outline.</p>

        <div class="tab" id="one">This is Hair</div>
        <div class="tab" id="two">This is two</div>
        <div class="tab" id="three">This is three</div>
      </div>
    </div>
  </div>
</section>

此处加上Java脚本：

  <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script>
  <script>
    $(document).ready(function(){
      $(".link").click(function() {
        var which = $(this).data('val');
        $(".tab").hide();    
        $('#'+which).show();        
      });
    });
  </script>

我的问题是，我希望在没有任何用户交互的情况下加载一个欢迎的“标签”（如我的代码中所示），但是如果使用点击另一个标签，则会消失。目前它只是坐在那里，新的信息形成在它下面。

干杯

更新CSS

#building {
float: right;
} 
 #menu {
float: left;
width: 100%;
overflow: auto;

}
.tab { display:none; }

Answer 1

我希望在没有任何用户互动的情况下加载欢迎“标签”

您可以在css中执行此操作：

.tab {  display: none; }

上面的css会使标签隐藏，但用户可以看到欢迎，而无需任何用户交互。但是你需要确保menu div没有通过css显式隐藏。

Answer 2

我认为您应该在{c}中将#menu div标记为position:relative，并且标签应标记为position:absolute top:0和left:0

接下来，也许您应该将欢迎文件放在separate div中，并在打开另一个标签时将其隐藏（或将欢迎文章也作为标签页）

在这个jsFiddle中，您可以看到它正在进行一些修改（我删除了图像映射，并将欢迎放在div中）

默认加载DIV Javascript

2 个答案: