Question

我正在使用JQuery标签，我希望能够在点击时加载每个页面。

所以我的index.php在我的数据库连接等顶部有一个include，然后我有这些标签：

<ul class="nav nav-tabs">
                  <li class="active"><a href="#tab_1" data-toggle="tab">Tab 1</a></li>
                  <li><a href="#tab_2" data-toggle="tab">Tab 2</a></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      Dropdown <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                      <li role="presentation" class="divider"></li>
                      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
                    </ul>
                  </li>
                  <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
                </ul>

并且每个标签都有自己的内容div：

<div class="tab-content">
                  <div class="tab-pane active" id="tab_1">

                  </div><!-- /.tab-pane -->
                  <div class="tab-pane" id="tab_2">

                  </div><!-- /.tab-pane -->
                </div><!-- /.tab-content -->

然后我有单独的页面，不包括我想要包含在选项卡内容div中的数据库连接

但我不希望在index.php页面加载时将它们全部加载。如何在单击选项卡时设置每个包含加载？

Answer 1

您需要调用标签的ajax更改。您可以使用以下代码。这个例子在jQuery站点

中给出

<script>
  $(function() {
    $( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        });
      }
    });
  });
  </script>

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
    <li><a href="ajax/content2.html">Tab 2</a></li>
    <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
    <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
</div>

您可以在https://jqueryui.com/tabs/#ajax

找到更多详细信息

Answer 2

您可以使用jquery的加载功能。您可以在选项卡中包含php文件。使用以下代码

<script>
$(document).ready(function(){
$("#tabid").click(function()
{
    $("#whereToPlace").load("http://path/to/file");
});
});
</script>

不要忘记首先包含Jquery库

Answer 3

单击选项卡时，请尝试此代码。

public class ContactsAdapter extends ArrayAdapter<ListViewItem> implements View.OnClickListener
{

public ContactsAdapter(Context context, List<ListViewItem> items) {
    super(context, R.layout.contacts_list_item, items);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder;

    if(convertView == null) {
        // inflate the GridView item layout
        LayoutInflater inflater = LayoutInflater.from(getContext());
        convertView = inflater.inflate(R.layout.contacts_list_item, parent, false);

        // initialize the view holder
        viewHolder = new ViewHolder();
        viewHolder.ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon);
        viewHolder.ivStarIcon = (ImageView)convertView.findViewById(R.id.FavoriteStarImageView);
        viewHolder.tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);
        viewHolder.tvDescription = (TextView) convertView.findViewById(R.id.tvDescription);
        convertView.setTag(viewHolder);
    } else {
        // recycle the already inflated view
        viewHolder = (ViewHolder) convertView.getTag();
    }

    // update the item view
    ListViewItem item = getItem(position);
    if(item.icon != null)
    viewHolder.ivIcon.setImageURI(Uri.parse(item.icon));
    else
    viewHolder.ivIcon.setImageResource(R.drawable.ic_stub);
    viewHolder.tvTitle.setText(item.title);
    viewHolder.tvDescription.setText(item.description);
    if(item.favoriteIcon)
    viewHolder.ivStarIcon.setImageResource(R.drawable.ic_action_important);
    else
    viewHolder.ivStarIcon.setImageResource(R.drawable.ic_action_not_important);

    // sets onclick listener for the icon button
    viewHolder.ivStarIcon.setOnClickListener(this);
    return convertView;
}

@Override
public void onClick(View v) 
{
  // TODO add to favorite list fragment
}

private static class ViewHolder {
    ImageView ivIcon;
    ImageView ivStarIcon;
    TextView tvTitle;
    TextView tvDescription;
}

重新加载PHP包含或要求

3 个答案: