使用url的jquery选项卡

Question

我是网络编程的新手，我正在开发一个需要标签的项目。我从教程中得到了以下工作代码，它按预期工作。但对于我的项目，我需要

选项卡就像这样每个标签从不同的网址中提取内容。

---

      <ul class="tabs">
        <li><a href="tab1.php">tab1</a></li>
      </ul>

---

以下是工作代码。

的 HTML

      <ul class="tabs">
          <li><a href=".tab1">tab1</a></li>

      </ul>

     <div class="tab_container">


     <div class="tab_content tab1">
       tab1 contents
     </div><!--End Tab 1 -->

js code

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

            $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute       value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
    });

}）;

下面是工作css

   ul.tabs {
       margin: 0;
       padding: 0;
       float: left;
       list-style: none;
       height: 19px; /*--Set height of tabs--*/
       border-bottom: 1px solid #E2E2E2;
       border-left: 1px solid #E2E2E2;
       width: 100%;
       margin-bottom:20px;
    }
   ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 18px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 18px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #E2E2E2;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #f2f2f2;
    margin-right:5px;
    min-width:73px;
    text-align:center;

  }
  ul.tabs li:first-child{ /*--Removes the left border from the first child of the list--*/
  border-left:none;

  }
  ul.tabs li a {
    text-decoration: none;
    color: #333333;
    display: block;
    font-size: 11px;

    padding-right:5px;
    padding-left:5px;

    outline: none;
  }
  ul.tabs li a:hover {
    background: #fff;
  }
  html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
    color:#3B5998;
  }
  ul.tabs li.active a{
    color:#3B5998;
  }

Answer 1

使用此javascript通过ajax加载脚本

$(document).ready(function() {
    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function(e) {
        var url = $(this).find("a:first").attr("href");

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab

        //hide the content div and load the url
        $(".tab_content").hide('fast',function(){
            jQuery(this).html('').load(url, function(){$(this).show();});
        });
        return false;
    });
});