如何在选项卡中添加下拉菜单

How to add dropmenu in tabs?

本文关键字：添加 下拉菜单 选项      更新时间：2023-09-26

我在网站上完成了一个创建选项卡，现在我想添加下拉菜单到我的任何选项卡，我该怎么做?

我的Jsf代码:

 var tabLinks = new Array();
    var contentDivs = new Array();
    document.getElementsByTagName('body')[0].onload = basla();
    function basla() {
      var tabListItems =  document.getElementById('anatablar').children;
      for ( var i = 0; i < tabListItems.length; i++ ) {
        if ( tabListItems[i].nodeName == "LI" ) {
          var tabLink = getFirstChildWithTagName1( tabListItems[i], 'A' );
          var id = getHash1( tabLink.getAttribute('href') );
          tabLinks[id] = tabLink;
          contentDivs[id] = document.getElementById( id );
        }
      }
      var i = 0;
      for ( var id in tabLinks ) {
        tabLinks[id].onclick = showTab1;
        tabLinks[id].onfocus = function() { this.blur(); };
        if ( i == 0 ) tabLinks[id].className = 'selected';
        i++;
      }
      var i = 0;
      for ( var id in contentDivs ) {
        if ( i != 0 ) contentDivs[id].className = 'tabIcerik hide';
        i++;
      }
    }
    function showTab1() {
      var selectedId = getHash1( this.getAttribute('href') );
      for ( var id in contentDivs ) {
        if ( id == selectedId ) {
            console.log("Put a message here."+id);
          tabLinks[id].className = 'selected';
          contentDivs[id].className = 'tabIcerik';
        } else {
          tabLinks[id].className = '';
          contentDivs[id].className = 'tabIcerik hide';
        }
      }      
      return false;
    }
    function getFirstChildWithTagName1( element, tagName ) {
      for ( var i = 0; i < element.childNodes.length; i++ ) {
        if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
      }
    }
    function getHash1( url ) {
      var hashPos = url.lastIndexOf ( '#' );
      return url.substring( hashPos + 1 );
    }

我的html代码:

 <ul id="anatablar">
  <li><a href="#about">Tab1</a></li>
  <li><a href="#advantages">Tab2</a></li>
  <li><a href="#usage">Tab3</a></li>
</ul>
<div class="tabContent" id="about">
  <div>
    <p>JavaScript.</p>
   </div>
</div>
<div class="tabContent" id="advantages">
  <div>
    <p>Web forms.</p>
  </div>
</div>
<div class="tabContent" id="usage">
  <div>
    <p>Click</p>
  </div>
</div>
我的css代码: 
   body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; }
      ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
      ul#tabs li { display: inline; }
      ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
      ul#tabs li a:hover { background-color: #f1f0ee; }
      ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
      div.tabContent { border: 1px solid #c9c3ba; padding: 0.5em; background-color: #f1f0ee; }
      div.tabContent.hide { display: none;

我如何添加任何下拉菜单到这个表?就像在"DOZ"选项卡中显示的网站http://www.vademecumonline.com.tr/medicineProduct/supravit一样?

提前感谢。:)

嘿，

这可以很容易地使用纯css，通过使用显示属性

在jsfiddle上检查此代码:

ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}
纯CSS

使用库更容易做到这一点。试着引导。这里有一个例子http://getbootstrap.com/javascript/#tabs

www.vademecumonline.com使用相同的;)

相关文章：