jquery中的导航菜单下拉选项卡

Question

我有一个要求创建导航菜单选项卡，每个选项卡都有像下拉菜单一样的子选项卡。每当我点击每个标签时，相应的内容应该显示（对于子标签也是如此）。我面临的css问题如何正确显示与菜单相关的子选项卡，还需要显示子选项卡相关的内容，当我点击它。任何人都可以帮助我呢？

$(document).ready(function(){ 
 

 

 
    $('ul#myNavUl li').on("click", (function(e) { 
 
    // Add selected class to clicked tab 
 
    $(this).addClass('selected').siblings().removeClass('selected'); 
 
    
 
    // Determine selected li index in respect to parent ul 
 
    var tabIndex = $(this).index(); 
 
    
 
    // Find article respective to selected tab 
 
    var article = $(this).closest('.content').find('.articles').children().eq(tabIndex); 
 
    
 
    // Add selected class to respective article 
 
    article.addClass('selected').siblings().removeClass('selected'); 
 

 
    var parentH = $('ul#myNavUl li ul').parent().height(); 
 
    
 
    $('ul#myNavUl li ul').css('top', parentH); 
 
    $('ul#myNavUl li ').hover(function(){ 
 
     $('ul', this).show(); 
 
    }, function(){ 
 
     $('ul', this).hide(); 
 
    }); 
 

 

 

 
})); 
 

 
});

body { 
 
    background-color: #333; 
 
    font-family: "Open Sans Condensed"; 
 
    margin: 0; 
 

 
} 
 

 
.content { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    padding: 12px; 
 
} 
 

 
.article { 
 
    display: none; 
 
    margin: 100px auto 0; 
 
    width: 1024px; 
 
    padding: 8px 12px; 
 
    border-radius: 5px; 
 
    background-color: #f9f9f9; 
 
} 
 
.article.selected { 
 
    display: block; 
 
} 
 
.article h2, .article p { 
 
    color: #2a2a2a; 
 
} 
 

 
ul#myNavUl { 
 
    list-style: none; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 

 
ul#myNavUl li { 
 
    position: relative; 
 
    width: 15%; 
 
    margin: 0 4px; 
 
    padding: 15px; 
 
    float: left; 
 
    background-color: #0077bb; 
 
    
 
} 
 
ul#myNavUl li:hover { 
 
    background-color: #00aaee; 
 
} 
 
ul#myNavUl li.selected { 
 
    background-color: #00aaee; 
 
} 
 
ul#myNavUl li.selected::after { 
 
    position: absolute; 
 
    display: block; 
 
    width: 0; 
 
    bottom: -15px; 
 
    left: calc(50% - 15px); 
 
    content: ""; 
 
    border-width: 15px 15px 0; 
 
    border-style: solid; 
 
    border-color: #00aaee transparent; 
 
} 
 

 
ul#myNavUl li a{ 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
ul#myNavUl li ul{ 
 
     position:absolute; 
 
     left:0; 
 
     display:none; 
 
    }

<div class="content"> 
 
    <div class="tabs"> 
 
    <ul id="myNavUl"> 
 
     <li class="selected">Tab 1</li> 
 
     <li><a href="#">Tab 2</a></li> 
 
     <li><a href="#">Tab 3</a></li> 
 
     <li><a href="#">Tab 4</a> 
 
      <ul><!-- added drop-down items --> 
 
       <li><a href="#son-of-tab3" >drop-down 1</a></li> 
 
       <li><a href="#son-of-tab3" >drop-down 2</a></li> 
 
       <li><a href="#son-of-tab3" >drop-down 3</a></li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="articles"> 
 
    <div class="article selected"> 
 
     <h2>Article 1</h2> 
 
    </div> 
 
    <div class="article"> 
 
     <h2>Article 2</h2> 
 
    </div> 
 
    <div class="article"> 
 
     <h2>Article 3</h2> 
 
    </div> 
 
    <div class="article"> 
 
     <h2>Article 4</h2> 
 
    </div> 
 
    <div class="article"> 
 
     <h2>Article 5</h2> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

我为您构建与选项卡和屏幕的容器， 让我知道你在找什么。

HTML：

<div id="tp--nav-bar"> 
    <ul id="nav-bar--list"> 
    <li class="controler"> 
     <a>home</a> 
     <ul class="screen"> 
     <li><a>page</a></li> 
     <li><a>page</a></li> 
     </ul> 
    </li> 
    <li class="controler"> 
     <a>about</a> 
     <ul class="screen"> 
     <li><a>page</a></li> 
     <li><a>page</a></li> 
     </ul> 
    </li> 
    <li class="controler"> 
     <a>gallery</a> 
     <ul class="screen"> 
     <li><a>page</a></li> 
     <li><a>page</a></li> 
     </ul> 
    </li> 
    <li class="controler"> 
     <a>contact</a> 
     <ul class="screen"> 
     <li><a>page</a></li> 
     <li><a>page</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

SCSS：

@mixin transition($ease, $s) { 
    -webkit-transition: $ease $s; 
    -moz-transition: $ease $s; 
     -ms-transition: $ease $s; 
     -o-transition: $ease $s; 
      transition: $ease $s; 
} 

@mixin translate($x, $y) { 
    -webkit-transform: translate($x,$y); 
    -moz-transform: translate($x,$y); 
     -ms-transform: translate($x,$y); 
     -o-transform: translate($x,$y); 
      transform: translate($x,$y); 
} 


#nav-bar--list { 
    font-family: 'Raleway', sans-serif; 
    > li { 
    cursor: pointer; 
    position: relative; 
    display: inline-block; 
    float: left; 
    width: 25%; 
    height: 50px; 
    line-height: 50px; 
    text-align: center; 
    background: #00aaee; 
    color: #fff; 
    overflow: hidden; 
    a { 
     display: block; 
     width: 100%; 
     height: 100%; 
    } 
    } 
    > li.active { 
    background: #007eb1; 
    overflow: visible; 
    } 
    > li:hover { 
    background: #007eb1; 
    } 
} 

.screen { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    line-height: 40px; 
    text-align: center; 
    background: #00aaee; 
    color: #fff; 
    z-index: -1; 
    opacity: 0; 
    @include translate(0px, 50px); 
    @include transition(cubic-bezier(0.4, 0.1, 0, 1.6), 0.45s); 
    li:hover { 
     background: #007eb1; 
     a { 
      color: #fff; 
      text-decortion: none; 
     } 
    } 
    } 
.screen.active { 
     z-index: 1; 
     opacity: 1; 
     @include translate(0px, 0px); 
} 

的jQuery：

$(document).ready(function() { 
    tabPanel('#tp--nav-bar') 
}); 


function tabPanel(element) { 

    var container = $(element), 
    controlers = container.find('.controler'), 
    screens = container.find('.screen'), 
    map = {}; 

    for (i = 0; i < controlers.length; i++) { 

    var control = controlers[i], 
     screen = screens[i], 
     controler = 'controler-' + i, 
     screener = 'screener-' + i; 

    $(control).attr('id', controler); 
    $(screen).attr('id', screener); 

    map[controler] = screener; 
    }; 

    controlers.click(function() { 

    var controlerId = $(this).attr('id'), 
     controlerClass = $(this).attr('class'), 
     controlerClass = controlerClass.indexOf('active'); 

    if (controlerClass == -1) { 

     controlers.removeClass('active'); 

     screens.removeClass('active'); 

     $('#' + map[controlerId]).addClass('active'); 

     $('#' + controlerId).addClass('active'); 

    } 

    }); 

} 

My Fiddle

Answer 2

我检查了你的代码并查看了浏览器的控制台;它有一个像$没有定义的jQuery错误。我想你忘了添加jQuery库;这就是发生这种错误的方式。添加jQuery文件或者你也可以使用jQuery cdn也是这样。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

添加此行添加</body>标记之前，然后检查它是否工作。