1

我尝试将动态内容添加到选项卡并在选项卡为空时隐藏内容

html代码

<ul id="tabs">
    <li><a href="#" name="#tab1">One</a></li>
    <li><a href="#" name="#tab2">Two</a></li>
    <li><a href="#" name="#tab3">Three</a></li>
    <li><a href="#" name="#tab4">Four</a></li>
</ul>

<div id="content_tabs">
    <div id="tab1">content 1</div>
    <div id="tab2">content 2</div>
    <div id="tab3">content 3</div>
    <div id="tab4">content 4</div>
</div>

js代码

function resetTabs(){
    jQuery("#content_tabs > div").hide(); //Hide all content
    jQuery("#tabs a").attr("id",""); //Reset id's      
}

var myUrl = window.location.href; //get URL
var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For mywebsite. com/tabs.html#tab2, myUrlTab = #tab2     
var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab

jQuery(function(){
    jQuery("#content_tabs > div").hide(); // Initially hide all content
    jQuery("#tabs li:first a").attr("id","current"); // Activate first tab
    jQuery("#content_tabs > div:first").fadeIn(); // Show first tab content

    jQuery("#tabs a").on("click",function(e) {
        e.preventDefault();
        if (jQuery(this).attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        resetTabs();
        jQuery(this).attr("id","current"); // Activate this
        jQuery(jQuery(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });

    for (i = 1; i <= $("#tabs li").length; i++) {
      if (myUrlTab == myUrlTabName + i) {
          resetTabs();
          jQuery("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
          jQuery(myUrlTab).fadeIn(); // Show url tab content        
      }
    }
});

美女css

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0 -15px 0 0;
}

#tabs a {
  float: left;
  position: relative;
  padding: 0 40px;
  height: 0; 
  line-height: 30px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-right: 30px solid transparent;
  border-bottom: 30px solid #3D3D3D;
  border-bottom-color: #777\9;
  opacity: .3;
  filter: alpha(opacity=30);      
}

#tabs a:hover,
#tabs a:focus {
  border-bottom-color: #2ac7e1;
  opacity: 1;
  filter: alpha(opacity=100);
}

#tabs a:focus {
  outline: 0;
}

#tabs #current {
  z-index: 3;
  border-bottom-color: #3d3d3d;
  opacity: 1;
  filter: alpha(opacity=100);     
}

这里演示 http://jsfiddle.net/uVNFp/95/

如果有人知道如果选项卡为空我如何隐藏内容，我将不胜感激

谢谢

4

3 回答 3

2

http://jsfiddle.net/tdf22/1/

与原始小提琴的更改：

  • 删除的内容<div id="tab2">。
  • 添加了以下内容。
$("#content_tabs > div:empty").each(function() {
    $("#tabs > li").eq($(this).index()).hide();
});

编辑：

为了回应您对空白的评论，我创建了这个小提琴：http: //jsfiddle.net/tdf22/3/

在这一个中，我：

  • 添加了以下 jQuery 自定义表达式
$.expr[":"].emptyOrWhiteSpace = function(obj){
  var $this = $(obj);
  return ($.trim($this.html()) === "");
};

  • 并改变了这一行

    $("#content_tabs > div:empty").each(function() {

  • 对此

    $("#content_tabs > div:emptyOrWhiteSpace").each(function() {

于 2013-01-26T04:23:56.723 回答
1

Gustavo，这只是我整理的一个快速答案，以便你有一些工作。这可以以更专业的方式完成。http://jsfiddle.net/tdf22/8/

我只是在你的 javascript 的底部添加了这个：

var tabs = $('#tabs li');
for (var i=0; i<tabs.length; ++i) {
  if (tabs[i].style.display !== 'none') {
    tabs[i].firstChild.id = 'current'; 
    $('#tab'+(i+1)).show();
    return false;
  }   
}
于 2013-01-26T19:17:35.377 回答
0 
var El = document.getElementById("El"); //replace
If(El.hasChildNodes()) {
      El.style.display = "block";
    } else {
        El.style.display = "none";
    }
于 2013-01-26T04:07:05.913 回答