单击Jquery并加载后复制并粘贴部分HTML

时间:2016-11-06 22:49:40

标签: javascript jquery html css volt

我在这里有一个很好的问题,我不知道如何解决它。我在我的伏特文件中放了一些javascript,当我要求点击它工作并加载页面但问题是我也复制并过去部分<head>文件和部分引导导航栏菜单{{1} }。

Bootstrap菜单代码:

<nav>

<nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="nav navbar-nav"> <li {% if view.url == '/' %} class="active" {% endif %} ><a class="navbar-brand" href="/">DaizCode</a></li> </ul> </div> <?php $this->view->url = $this->router->getRewriteUri(); ?> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <?php if(isset($_SESSION['username']) == false) { ?> <li {% if view.url == '/about' %} class="active" {% endif %} ><a href="/about" class="about">About Us</a> </li> <li {% if view.url == 'auth/login' %} class="active" {% endif %} ><a href="auth/login" class="login">Login</a> </li> <li {% if view.url == 'auth/register' %} class="active" {% endif %} ><a href="auth/register">Register</a> </li> <?php } else { ?> <li {% if view.url == '/auth/dashboard' %} class="active" {% endif %} ><a href="/auth/dashboard" title="Dashboard" class="dashboard"><img src="http://www.daizcode.com/img/activity-icon.png" /></a> </li> <li {% if view.url == '/auth/dashboard/learn' %} class="active" {% endif %} ><a href="/auth/dashboard/learn" title="Learn" class="learn"><img src="http://www.daizcode.com/img/learn-icon.png" /></a> </li> <li {% if view.url == 'auth/dashboard/discussions' %} class="active" {% endif %} ><a href="auth/dashboard/discussions" title="Discussions" class="conv"><img src="http://www.daizcode.com/img/conv-icon.png" /></a> </li> <li {% if view.url == 'auth/dashboard/notifications' %} class="active" {% endif %} ><a href="auth/dashboard/notifications" title="Notifications" class="notifications"><img src="http://www.daizcode.com/img/globe-icon.png" /></a> </li> <li {% if view.url == 'auth/dashboard/inbox' %} class="active" {% endif %} ><a href="auth/dashboard/inbox" title="Inbox" class="inbox"><img src="http://www.daizcode.com/img/inbox-icon.png" /></a> </li> <?php } ?> </ul> </div> </div><!-- /.container-fluid --> </nav> {{ content() }} 是伏特模板的一部分,它会立即选择其他页面来显示它。 我有一些PHP,所以我可以在用户打开或不打开后显示不同的菜单。

这是导航文件 nav.volt )代码:

{{ content() }}

这里我告诉你我的电压页(脚本部分):

<input type="text" class="user-login" name="user-login" placeholder="Username..." />
<input type="password" class="password-login" name="pwd" placeholder="Password..." />
<a href="#" name="close" class="close">X</a>

在这里,我可以向您展示您在哪里看到页面检查的图像,并且在点击引导程序导航栏中的类{{ javascript_include('/js/jquery-3.1.1.js') }} {{ javascript_include('/js/jquery-3.1.1.min.js') }} {{ javascript_include('/js/bootstrap.min.js') }} <script type="text/javascript"> $(".login").click(function() { $(".navbar-right").load("auth/login/nav"); return false; }); </script> 后进行检查。我要在它上面显示的代码是在红色矩形之后。 我想知道的是如何删除矩形内部的内容。见下图。

Google Chrome Inspect of the problem I said above

Updated image problem

谢谢。

1 个答案:

答案 0 :(得分:1)

您可以添加此内容以获取文件的特定部分,

这将在输入元素之后加载输入元素和标记,而不加载导航或任何其他标记。

<script type="text/javascript">
  $(".login").click(function() {
    $(".navbar-right").load("auth/login/nav input,input+a");
    return false;
  });

</script>

希望这有帮助