Question

我在网站上创建了一个标签，现在我想将dropmenus添加到我的任何标签中，我该怎么做？

我的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;

如何在此表格中添加任何下拉菜单？如＃34; DOZ＆＃34;中的网站http://www.vademecumonline.com.tr/medicineProduct/supravit所示标签

提前致谢。：）

Answer 1

嘿，

使用纯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}

Drop Down Menu Pure CSS

Answer 2

使用库来更容易。尝试bootstrap。在这里查看示例http://getbootstrap.com/javascript/#tabs

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

如何在标签中添加下拉菜单？

2 个答案: