Javascript 如何修复''；单击某个按钮时添加到我的URL_Javascript_Jquery_Html_Css

Javascript 如何修复''；单击某个按钮时添加到我的URL

javascript jquery html css

Javascript 如何修复''；单击某个按钮时添加到我的URL,javascript,jquery,html,css,Javascript,Jquery,Html,Css,正如标题所说，当我点击某个按钮时，它会在我的URL中添加一个“？”。我只是想知道为什么会这样。我正在使用JQuery和HTML。这导致我的网站忽隐忽现，我只是想知道是什么导致了这个问题。这是切换div的代码，以及导致添加“？”的原因 $(document).ready(function() { $('#helpBtn').click(function() { $("#helpdiv").slideToggle(); }); }) 我的HTML如

正如标题所说，当我点击某个按钮时，它会在我的URL中添加一个“？”。我只是想知道为什么会这样。我正在使用JQuery和HTML。这导致我的网站忽隐忽现，我只是想知道是什么导致了这个问题。这是切换div的代码，以及导致添加“？”的原因

$(document).ready(function() {
      $('#helpBtn').click(function() {
        $("#helpdiv").slideToggle();
      });
    })

我的HTML如下

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Big News Portal</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link type="text/css" href="css/main.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!--<script src="js/jquery-minified.js"></script>-->
  <script src="js/bbc-home-RSS.js"></script>
  <script src="js/bbclivesearch"></script>
  <script src="js/guardian-home.js"></script>
  <script src ="js/help.js"></script>
  <!--<script src="js/test.js"></script>-->
  <script src="js/navigation.js"></script>
</head>

<body>
  <div class="jumbotron text-center">
    <h1>Big News Portal</h1>
  </div>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li class="active">
          <a class="navbar-brand" href="#NewsHome" id="home-btn" data-section="section_home">Home</a>
        </li>
        <li><a href="#NewsUK" data-section="section_uk" id="uk-btn">UK News</a>
        </li>
        <li><a href="#NewsWorld" data-section="section_world" id="world-btn">World News</a>
        </li>
        <li><a href="#NewsPolitics" data-section="section_politics" id="politics-btn">Politics</a>
        </li>
        <li><a href="#NewsScience" data-section="section_science" id="science-btn">Science</a>
        </li>
        <li><a href="#NewsTech" data-section="section_tech" id="technology-btn">Technology</a>
        </li>
        <li><a href="#NewsEntertainment" data-section="section_entertainment" id="entertainment-btn">Entertainment</a>
        </li>
        <li><a href="#NewsSport" data-section="section_sport" id="sport-btn">Sport</a>
        </li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">

          <input type="text" class="form-control" placeholder="Search" onkeyup="showResult(this.value)">
        </div>
        <button type="submit" id="helpBtn" class="btn btn-default">Help
        </button>
      </form>
    </div>
    </div>
  </nav>
  <div class="container">
    <div id="helpdiv">
    <div id= "helpTitle">
    <h3>Live Search Help</h3>
    </div>
      <p>Use the search to display articles from the BBC. </p>
      <p>Links to articles will be diplayed in the BBC Live Search box.</p>
    </div>
    <div class="page-header">
      <h1>Big News Portal</h1>
    </div>
    <div class="row">
      <div class="col-sm-9">
        <div class="row">
          <div class="col-sm-12">
            <div id="head-article" class="thumbnail article">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div id="article1" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article2" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article3" class="thumbnail article">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div id="article4" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article5" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article6" class="thumbnail article">
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div id="article7" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article8" class="thumbnail article">
            </div>
          </div>
          <div class="col-md-4">
            <div id="article9" class="thumbnail article">
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-3 well">
        <p class="h4"><em>BBC Live Search</em></p>
        <div id="livesearch" class="thumbnail thumbnail-article-small-search">
        </div>

      </div>
      <div class="col-sm-3 well">
        <h2>BBC Most Popular</h2>
        <div id="article10" class="thumbnail article">
        </div>
        <div id="article11" class="thumbnail article">
        </div>
        <div id="article12" class="thumbnail article">
        </div>
        <div id="article13" class="thumbnail article">
        </div>
        <div id="article14" class="thumbnail article">
        </div>
      </div>
    </div>
  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-default" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>


大新闻门户
大新闻门户


















帮助
实时搜索帮助
使用搜索显示来自BBC的文章
文章链接将显示在BBC直播搜索框中
大新闻门户
英国广播公司现场搜索
英国广播公司最受欢迎
启动演示模式
&时代；
情态标题
接近

提前感谢

是否尝试防止违约？请阅读此处了解更多信息

单击“提交”按钮时，需要在事件上设置默认值，如下所示：

$(document).ready(function() {
  $('#helpBtn').click(function(e) {
    e.preventDefault();
    $("#helpdiv").slideToggle();
  });
})

按钮类型为submit，因此它正在提交表单并尝试将任何可能的查询参数附加到url

为了避免这种情况，您还必须使用jQuery处理表单提交。您可以使用preventDefault（）停止按钮的默认行为

该按钮具有“type=submit”属性，并且位于表单中。单击时，它会提交表单，重新加载页面作为响应（“闪烁”）

对于不打算提交表单的按钮，请将type属性更改为“button”（默认值为“submit”）

帮助

应该不需要修改JavaScript来查看事件处理。

谢谢！！谢谢

$(document).ready(function() {
  $('#helpBtn').click(function(e) {
    e.preventDefault();
    $("#helpdiv").slideToggle();
  });
})

 $(document).ready(function() {
  $('#helpBtn').click(function(event) {
    event.preventDefault();
    $("#helpdiv").slideToggle();
  });
})

<button type="button" id="helpBtn" class="btn btn-default">Help</button>