.js成员Feed在我的标签中没有拉过来？

时间：2014-04-22 15:11:06

标签： javascript html css

我希望通过标签式广告提取会员Feed。

成员Feed隐藏在Tab键结构后面，因此不可见。

任何人都可以在我的html / Css中发现我的错误。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">Headline goes here</div>
<div id="wrapper">
<div id="tabContainer">
    <div id="tabs">
      <ul>
        <li id="tabHeader_1">Men</li>
        <li id="tabHeader_2">Women</li>
        <li id="tabHeader_3">Search</li>
      </ul>
    </div>
    <div id="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Meet our Male Members</h2>

        <div id="member-feed"> <div id="member"><script type="text/javascript" src="http://s.wldcdn.net/api/badge/js/siteid|18479_limit|4_amin|16_amax|45"></script></div></div>

      </div>
      <div class="tabpage" id="tabpage_2">
        <h2>Meet our Female Members</h2>
        <p></p>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Search our Members</h2>
        <p></p>
      </div>
    </div>
     </div>
    </div>

  <script src="tabs_old.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1332079-8']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>
</html>

.CSS 

* {
    margin: 0;
    padding: 0;
}
#header {
    width: 300px;
    margin:auto;
    height: auto;
    float: none;
    clear: none;
}
#tabpage_1 {
    height: 265px;
    width: 270px;
}
#tabpage_2 {
    height:265px;
    }
#tabpage_3 {
    height:265px;   
}

body {
    background-position: top left;
    font: .8em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

h2{ 
    margin-bottom:10px;
}

#wrapper{
    width: 300px;
    margin: 10px auto 0;
    height: 340px;
}

#wrapper h1{
    color: #000000;
    text-align: center;
    margin-bottom: 20px;
}

#wrapper a{
    display:block;
    font-size:1.2em;
    padding-top:20px;
    color:#FFF;
    text-decoration:none;
    text-align:center;
}

#tabContainer {
    width: 290px;
    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    background-color: #2e2e2e;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 330px;
}

#tabs{
    height:30px;
    overflow:hidden;
}

#tabs > ul{
    font: 1em;
    list-style:none;
}

#tabs > ul > li{
    margin:0 2px 0 0;
    padding:7px 10px;
    display:block;
    float:left;
    color:#FFF;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-top-left-radius:4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px; 
    background: #C9C9C9; /* old browsers */
    background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
}

#tabs > ul > li:hover{
    background: #FFFFFF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #333;
}

#tabs > ul > li.tabActiveHeader{
    background: #FFFFFF; /* old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
    cursor:pointer;
    color: #333;
}

#tabscontent {
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 10px 10px 25px; /* firefox */
    background-position: left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
    margin: 0;
    color: #333;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF));
}
    /* MEMBERS FEED. */
.wld_badge_item {
    float: left;
    display: inline;
    margin-top: 15px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 0;
    height: 141px;
    width: 76px;
    overflow: visible;
    border-radius: 5px;
}

.wld_badge_item_photo a img  {
    height: 76px;
    width: 76px;
    border: medium solid #E30512;
    border-radius: 5px;
}
.wld_badge_item_detail {
    margin-top: 5px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 10px;
    font-family: league-gothic;
    font-size: 16px;
    line-height: 13px;
    font-weight: 400;
    color: #000;
    font-style: normal;
    text-align: center;
}
.wld_badge_item_name {
    margin-top: 5px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 10px;
    font-family: league-gothic;
    font-size: 16px;
    line-height: 13px;
    font-weight: 400;
    color: #000;
    font-style: normal;
    text-align: center;
}
.wld_badge_item_age {
    margin-top: 5px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 10px;
    font-family: league-gothic;
    font-size: 16px;
    line-height: 13px;
    font-weight: 400;
    color: #000;
    font-style: normal;
    text-align: center;
}
.wld_badge_item_region {
    margin-top: 5px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 10px;
    font-family: helvetica;
    font-size: 10px;
    line-height: 10px;
    font-weight: lighter;
    color: #D90B18;
    font-style: normal;
    text-align: center;
    text-transform:uppercase;
}
#member-feed {
    width: 270px;
    height: 250px;
    position: absolute;
    float: none;
    clear: none;
}
#member {
    width: 270px;
    height: 250px;

任何帮助都会很棒！

下面的Java脚本。

window.onload=function() {

  // get tab container
    var container = document.getElementById("tabContainer");
        var tabcon = document.getElementById("tabscontent");
        //alert(tabcon.childNodes.item(1));
    // set current tab
    var navitem = document.getElementById("tabHeader_1");

    //store which tab we are on
    var ident = navitem.id.split("_")[1];
        //alert(ident);
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");

    //hide two tab contents we don't need
     var pages = tabcon.getElementsByTagName("div");
        for (var i = 1; i < pages.length; i++) {
         pages.item(i).style.display="none";
        };

    //this adds click event to tabs
    var tabs = container.getElementsByTagName("li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}

0 个答案:

没有答案
相关问题
最新问题